/* /Components/Admin/CreatePeriodLockModal.razor.rz.scp.css */
.lock-type-options[b-rtefawyqyw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lock-type-option[b-rtefawyqyw] {
    padding: 1.5rem 1rem;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.lock-type-option:hover[b-rtefawyqyw] {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.lock-type-option.selected[b-rtefawyqyw] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.lock-type-option i[b-rtefawyqyw] {
    font-size: 2rem;
    opacity: 0.9;
}

.lock-type-option strong[b-rtefawyqyw] {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.lock-type-option small[b-rtefawyqyw] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.reason-options[b-rtefawyqyw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.reason-option[b-rtefawyqyw] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reason-option:hover[b-rtefawyqyw] {
    background: #e9ecef;
    border-color: #dee2e6;
}

.reason-option input[type="radio"][b-rtefawyqyw] {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

.reason-option span[b-rtefawyqyw] {
    font-weight: 500;
    color: #495057;
}

.reason-option input[type="radio"]:checked + span[b-rtefawyqyw] {
    color: #667eea;
    font-weight: 600;
}

.form-group[b-rtefawyqyw] {
    margin-bottom: 1.5rem;
}

.form-label[b-rtefawyqyw] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

.form-control[b-rtefawyqyw] {
    border-radius: 6px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-rtefawyqyw] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.alert[b-rtefawyqyw] {
    border-radius: 8px;
    border-left: 4px solid;
    padding: 1rem 1.25rem;
}

.alert-info[b-rtefawyqyw] {
    background: #e7f3ff;
    border-left-color: #3498db;
    color: #004085;
}

.alert-warning[b-rtefawyqyw] {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.alert-danger[b-rtefawyqyw] {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.modal-footer[b-rtefawyqyw] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn[b-rtefawyqyw] {
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn i[b-rtefawyqyw] {
    margin-right: 0.5rem;
}

.btn-primary[b-rtefawyqyw] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-rtefawyqyw] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled[b-rtefawyqyw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-rtefawyqyw] {
    background: #6c757d;
    border: none;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-rtefawyqyw] {
    background: #5a6268;
    transform: translateY(-2px);
}

.spinner-border-sm[b-rtefawyqyw] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

.text-danger[b-rtefawyqyw] {
    color: #dc3545;
}

.text-muted[b-rtefawyqyw] {
    color: #6c757d;
}

.form-text[b-rtefawyqyw] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .lock-type-options[b-rtefawyqyw] {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-dialog[b-rtefawyqyw] {
        margin: 0.5rem;
    }

    .modal-footer[b-rtefawyqyw] {
        flex-direction: column;
    }

    .modal-footer .btn[b-rtefawyqyw] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lock-type-options[b-rtefawyqyw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Admin/LockManagement.razor.rz.scp.css */
.lock-management-container[b-a95drp4y0t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-a95drp4y0t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h3[b-a95drp4y0t] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.page-header h3 i[b-a95drp4y0t] {
    margin-right: 0.5rem;
    color: #3498db;
}

.locks-card[b-a95drp4y0t] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.locks-card h5[b-a95drp4y0t] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.locks-card h5 i[b-a95drp4y0t] {
    margin-right: 0.5rem;
    color: #3498db;
}

.table[b-a95drp4y0t] {
    margin-bottom: 0;
}

.table thead[b-a95drp4y0t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.table thead th[b-a95drp4y0t] {
    border: none;
    font-weight: 600;
    padding: 1rem;
    vertical-align: middle;
}

.table tbody td[b-a95drp4y0t] {
    padding: 1rem;
    vertical-align: middle;
}

.lock-row[b-a95drp4y0t] {
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.lock-row:hover[b-a95drp4y0t] {
    background: #f8f9fa;
    transform: scale(1.01);
}

.lock-row.lock-payroll[b-a95drp4y0t] {
    border-left-color: #28a745;
}

.lock-row.lock-billing[b-a95drp4y0t] {
    border-left-color: #17a2b8;
}

.lock-row.lock-manual[b-a95drp4y0t] {
    border-left-color: #ffc107;
}

.lock-row.lock-audit[b-a95drp4y0t] {
    border-left-color: #dc3545;
}

.reason-cell[b-a95drp4y0t] {
    max-width: 250px;
}

.badge[b-a95drp4y0t] {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
}

.badge i[b-a95drp4y0t] {
    margin-right: 0.25rem;
}

.empty-state[b-a95drp4y0t] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 4rem 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.empty-state i[b-a95drp4y0t] {
    opacity: 0.3;
}

.empty-state h5[b-a95drp4y0t] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-card[b-a95drp4y0t] {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #00acc1;
}

.info-card h5[b-a95drp4y0t] {
    color: #006064;
    font-weight: 600;
    margin-bottom: 1rem;
}

.info-card h5 i[b-a95drp4y0t] {
    margin-right: 0.5rem;
}

.info-card ul[b-a95drp4y0t] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.info-card li[b-a95drp4y0t] {
    margin-bottom: 0.5rem;
    color: #00838f;
}

.info-card p[b-a95drp4y0t] {
    color: #006064;
}

.navigation-card[b-a95drp4y0t] {
    text-align: center;
}

.btn[b-a95drp4y0t] {
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn i[b-a95drp4y0t] {
    margin-right: 0.5rem;
}

.btn-primary[b-a95drp4y0t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-a95drp4y0t] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-sm[b-a95drp4y0t] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.btn-danger[b-a95drp4y0t] {
    background: #dc3545;
    border: none;
}

.btn-danger:hover:not(:disabled)[b-a95drp4y0t] {
    background: #c82333;
    transform: translateY(-2px);
}

.btn-outline-primary[b-a95drp4y0t] {
    border: 2px solid #667eea;
    color: #667eea;
    background: white;
    font-weight: 600;
}

.btn-outline-primary:hover[b-a95drp4y0t] {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.modal.show[b-a95drp4y0t] {
    display: block;
    animation: fadeIn-b-a95drp4y0t 0.2s ease;
}

.modal-content[b-a95drp4y0t] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.modal-header[b-a95drp4y0t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 1.25rem 1.5rem;
}

.modal-header .btn-close[b-a95drp4y0t] {
    filter: brightness(0) invert(1);
}

.modal-title i[b-a95drp4y0t] {
    margin-right: 0.5rem;
}

.modal-body[b-a95drp4y0t] {
    padding: 1.5rem;
}

.unlock-info[b-a95drp4y0t] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.unlock-info p[b-a95drp4y0t] {
    margin-bottom: 0.5rem;
}

.unlock-info p:last-child[b-a95drp4y0t] {
    margin-bottom: 0;
}

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

.form-label[b-a95drp4y0t] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-control[b-a95drp4y0t] {
    border-radius: 6px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-a95drp4y0t] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.modal-footer[b-a95drp4y0t] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.alert[b-a95drp4y0t] {
    border-radius: 8px;
    border-left: 4px solid;
    margin-bottom: 1.5rem;
}

.alert-success[b-a95drp4y0t] {
    background: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.alert-danger[b-a95drp4y0t] {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.alert-warning[b-a95drp4y0t] {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.spinner-border-sm[b-a95drp4y0t] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

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

@media (max-width: 768px) {
    .lock-management-container[b-a95drp4y0t] {
        padding: 1rem 0.5rem;
    }

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

    .table-responsive[b-a95drp4y0t] {
        overflow-x: auto;
    }

    .locks-card[b-a95drp4y0t] {
        padding: 1rem;
    }
}
/* /Components/Admin/LockSettings.razor.rz.scp.css */
.lock-settings-container[b-2lhokg4h65] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-2lhokg4h65] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.page-header h3[b-2lhokg4h65] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.page-header i[b-2lhokg4h65] {
    margin-right: 0.5rem;
    color: #3498db;
}

.settings-card[b-2lhokg4h65] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.settings-section[b-2lhokg4h65] {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.settings-section:last-of-type[b-2lhokg4h65] {
    border-bottom: none;
}

.settings-section h5[b-2lhokg4h65] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.settings-section h5 i[b-2lhokg4h65] {
    margin-right: 0.5rem;
    color: #3498db;
    font-size: 1rem;
}

.form-group[b-2lhokg4h65] {
    margin-bottom: 1.5rem;
}

.form-label[b-2lhokg4h65] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-check[b-2lhokg4h65] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
    transition: all 0.2s ease;
}

.form-check:hover[b-2lhokg4h65] {
    background: #e9ecef;
    transform: translateX(4px);
}

.form-check-input[b-2lhokg4h65] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
}

.form-check-label[b-2lhokg4h65] {
    cursor: pointer;
    margin-left: 0.5rem;
}

.badge[b-2lhokg4h65] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
}

.alert[b-2lhokg4h65] {
    border-radius: 8px;
    border-left: 4px solid;
    margin-top: 1.5rem;
}

.alert-info[b-2lhokg4h65] {
    background: #e7f3ff;
    border-left-color: #3498db;
    color: #004085;
}

.alert-success[b-2lhokg4h65] {
    background: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.alert-danger[b-2lhokg4h65] {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.form-actions[b-2lhokg4h65] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.btn[b-2lhokg4h65] {
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn i[b-2lhokg4h65] {
    margin-right: 0.5rem;
}

.btn-primary[b-2lhokg4h65] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2lhokg4h65] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled[b-2lhokg4h65] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-2lhokg4h65] {
    background: #6c757d;
    border: none;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-2lhokg4h65] {
    background: #5a6268;
    transform: translateY(-2px);
}

.navigation-card[b-2lhokg4h65] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.navigation-card h5[b-2lhokg4h65] {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.navigation-card h5 i[b-2lhokg4h65] {
    margin-right: 0.5rem;
}

.navigation-card p[b-2lhokg4h65] {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.navigation-card .btn-outline-primary[b-2lhokg4h65] {
    background: white;
    color: #667eea;
    border: 2px solid white;
    font-weight: 600;
}

.navigation-card .btn-outline-primary:hover[b-2lhokg4h65] {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.spinner-border-sm[b-2lhokg4h65] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

@media (max-width: 768px) {
    .lock-settings-container[b-2lhokg4h65] {
        padding: 1rem 0.5rem;
    }

    .settings-card[b-2lhokg4h65] {
        padding: 1.5rem 1rem;
    }

    .form-actions[b-2lhokg4h65] {
        flex-direction: column;
    }

    .form-actions .btn[b-2lhokg4h65] {
        width: 100%;
    }
}
/* /Components/Admin/OvertimeEmployeeSettings.razor.rz.scp.css */
/* Overtime Employee Settings Styling */

.container-fluid[b-lwtpmgtbqn] {
    max-width: 1600px;
}

/* Header */
.page-header h3[b-lwtpmgtbqn] {
    color: #2c3e50;
    font-weight: 600;
}

.page-header p[b-lwtpmgtbqn] {
    font-size: 0.938rem;
}

/* Summary Cards */
.summary-card[b-lwtpmgtbqn] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    transition: all 0.3s ease;
}

.summary-card:hover[b-lwtpmgtbqn] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.summary-icon[b-lwtpmgtbqn] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.summary-icon.total[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-icon.exempt[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.summary-icon.non-exempt[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.summary-icon.custom[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.summary-content[b-lwtpmgtbqn] {
    flex: 1;
}

.summary-label[b-lwtpmgtbqn] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.summary-value[b-lwtpmgtbqn] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

/* Card Styling */
.card[b-lwtpmgtbqn] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.25rem 1.5rem;
}

.card-header h5[b-lwtpmgtbqn] {
    margin: 0;
    font-weight: 600;
}

.card-body[b-lwtpmgtbqn] {
    padding: 1.5rem;
}

/* Search and Filter Section */
.input-group-text[b-lwtpmgtbqn] {
    background-color: #f8f9fa;
    border-right: none;
}

.form-control:focus[b-lwtpmgtbqn] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-select:focus[b-lwtpmgtbqn] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Bulk Actions */
.bulk-actions[b-lwtpmgtbqn] {
    display: flex;
    align-items: center;
}

.bulk-actions .text-muted[b-lwtpmgtbqn] {
    font-size: 0.875rem;
}

/* Table Styling */
.table[b-lwtpmgtbqn] {
    margin-bottom: 0;
}

.table thead th[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 1rem;
    vertical-align: middle;
}

.table thead th:first-child[b-lwtpmgtbqn] {
    border-top-left-radius: 8px;
}

.table thead th:last-child[b-lwtpmgtbqn] {
    border-top-right-radius: 8px;
}

.table tbody tr[b-lwtpmgtbqn] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-lwtpmgtbqn] {
    background-color: #f8f9fa;
}

.table tbody td[b-lwtpmgtbqn] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:last-child td[b-lwtpmgtbqn] {
    border-bottom: none;
}

/* Employee Info */
.employee-info[b-lwtpmgtbqn] {
    display: flex;
    flex-direction: column;
}

.employee-name[b-lwtpmgtbqn] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.employee-email[b-lwtpmgtbqn] {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Form Controls in Table */
.form-check-input[b-lwtpmgtbqn] {
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
}

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

.form-check-input:focus[b-lwtpmgtbqn] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-switch .form-check-input[b-lwtpmgtbqn] {
    width: 2.5rem;
    height: 1.25rem;
}

/* Badge Styling */
.badge[b-lwtpmgtbqn] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 6px;
}

.badge.bg-primary[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.badge.bg-success[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.badge.bg-info[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.badge-sm[b-lwtpmgtbqn] {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
}

/* Input Groups in Table */
.input-group-sm .input-group-text[b-lwtpmgtbqn] {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.input-group-sm .form-control[b-lwtpmgtbqn] {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Buttons */
.btn-sm[b-lwtpmgtbqn] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-outline-primary[b-lwtpmgtbqn] {
    color: #667eea;
    border-color: #667eea;
}

.btn-outline-primary:hover[b-lwtpmgtbqn] {
    background-color: #667eea;
    border-color: #667eea;
    color: white;
}

.btn-outline-info[b-lwtpmgtbqn] {
    color: #4facfe;
    border-color: #4facfe;
}

.btn-outline-info:hover[b-lwtpmgtbqn] {
    background-color: #4facfe;
    border-color: #4facfe;
    color: white;
}

/* Loading State */
.spinner-border[b-lwtpmgtbqn] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* Empty State */
.text-center.py-5 i[b-lwtpmgtbqn] {
    opacity: 0.5;
}

/* Alert */
.alert-danger[b-lwtpmgtbqn] {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    border: 1px solid #dc3545;
    border-left: 4px solid #dc3545;
}

.alert i[b-lwtpmgtbqn] {
    font-size: 1.125rem;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .container-fluid[b-lwtpmgtbqn] {
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .summary-card[b-lwtpmgtbqn] {
        margin-bottom: 1rem;
    }

    .table[b-lwtpmgtbqn] {
        font-size: 0.875rem;
    }

    .table thead th[b-lwtpmgtbqn],
    .table tbody td[b-lwtpmgtbqn] {
        padding: 0.75rem 0.5rem;
    }

    .employee-name[b-lwtpmgtbqn] {
        font-size: 0.938rem;
    }

    .employee-email[b-lwtpmgtbqn] {
        font-size: 0.8125rem;
    }
}

@media (max-width: 768px) {
    .d-flex.justify-content-between[b-lwtpmgtbqn] {
        flex-direction: column;
        gap: 1rem;
    }

    .summary-value[b-lwtpmgtbqn] {
        font-size: 1.5rem;
    }

    .summary-icon[b-lwtpmgtbqn] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .bulk-actions[b-lwtpmgtbqn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Stack table on mobile */
    .table-responsive[b-lwtpmgtbqn] {
        border: none;
    }

    .table thead[b-lwtpmgtbqn] {
        display: none;
    }

    .table tbody tr[b-lwtpmgtbqn] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        background: white;
    }

    .table tbody td[b-lwtpmgtbqn] {
        display: block;
        text-align: left;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f8f9fa;
    }

    .table tbody td:last-child[b-lwtpmgtbqn] {
        border-bottom: none;
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid #e9ecef;
    }

    .table tbody td[b-lwtpmgtbqn]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table tbody td:first-child[b-lwtpmgtbqn]::before {
        display: none;
    }

    .employee-info[b-lwtpmgtbqn] {
        margin-bottom: 0.5rem;
    }

    .btn-sm[b-lwtpmgtbqn] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-sm:last-child[b-lwtpmgtbqn] {
        margin-bottom: 0;
    }

    .input-group[b-lwtpmgtbqn] {
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .card-body[b-lwtpmgtbqn] {
        padding: 1rem;
    }

    .summary-card[b-lwtpmgtbqn] {
        padding: 1rem;
    }

    .form-label[b-lwtpmgtbqn] {
        font-size: 0.875rem;
    }

    .form-control[b-lwtpmgtbqn],
    .form-select[b-lwtpmgtbqn] {
        font-size: 0.875rem;
    }
}
/* /Components/Admin/OvertimeReports.razor.rz.scp.css */
/* Overtime Reports Styling */

.container-fluid[b-0wa19lc2o6] {
    max-width: 1600px;
}

/* Header */
.page-header h3[b-0wa19lc2o6] {
    color: #2c3e50;
    font-weight: 600;
}

.page-header p[b-0wa19lc2o6] {
    font-size: 0.938rem;
}

/* Card Styling */
.card[b-0wa19lc2o6] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.25rem 1.5rem;
}

.card-header h5[b-0wa19lc2o6] {
    margin: 0;
    font-weight: 600;
}

.card-body[b-0wa19lc2o6] {
    padding: 1.5rem;
}

/* Summary Cards */
.summary-card[b-0wa19lc2o6] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    transition: all 0.3s ease;
}

.summary-card:hover[b-0wa19lc2o6] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.summary-icon[b-0wa19lc2o6] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.summary-card.overtime .summary-icon[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.summary-card.cost .summary-icon[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.summary-card.employees .summary-icon[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-card.average .summary-icon[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.summary-content[b-0wa19lc2o6] {
    flex: 1;
}

.summary-label[b-0wa19lc2o6] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.summary-value[b-0wa19lc2o6] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

/* Approval Queue Card */
.approval-queue-card .card-header[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

/* Employee Info */
.employee-info[b-0wa19lc2o6] {
    display: flex;
    flex-direction: column;
}

.employee-name[b-0wa19lc2o6] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.employee-email[b-0wa19lc2o6] {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Reason Text */
.reason-text[b-0wa19lc2o6] {
    font-style: italic;
    color: #495057;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Approval Form */
.approval-form[b-0wa19lc2o6] {
    min-width: 200px;
}

.approval-form .form-control[b-0wa19lc2o6] {
    font-size: 0.875rem;
}

/* Alert Cards */
.alert-card[b-0wa19lc2o6] {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

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

.alert-card.alert-warning[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border-left-color: #ffc107;
}

.alert-card.alert-overtime[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    border-left-color: #ff6b6b;
}

.alert-card.alert-danger[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    border-left-color: #dc3545;
}

.alert-icon[b-0wa19lc2o6] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-warning .alert-icon[b-0wa19lc2o6] {
    background: #ffc107;
    color: white;
}

.alert-overtime .alert-icon[b-0wa19lc2o6] {
    background: #ff6b6b;
    color: white;
}

.alert-danger .alert-icon[b-0wa19lc2o6] {
    background: #dc3545;
    color: white;
}

.alert-content[b-0wa19lc2o6] {
    flex: 1;
}

.alert-employee[b-0wa19lc2o6] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.alert-message[b-0wa19lc2o6] {
    color: #495057;
    margin-bottom: 0.5rem;
}

.alert-details[b-0wa19lc2o6] {
    font-size: 0.875rem;
    color: #6c757d;
}

.alert-details i[b-0wa19lc2o6] {
    opacity: 0.7;
}

/* Table Styling */
.table[b-0wa19lc2o6] {
    margin-bottom: 0;
}

.table thead th[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 1rem;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

.table thead th:hover[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #5a6fd4 0%, #6a3f8c 100%);
}

.table thead th:first-child[b-0wa19lc2o6] {
    border-top-left-radius: 8px;
    cursor: default;
}

.table thead th:last-child[b-0wa19lc2o6] {
    border-top-right-radius: 8px;
}

.table thead th i[b-0wa19lc2o6] {
    opacity: 0.8;
}

.table tbody tr[b-0wa19lc2o6] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-0wa19lc2o6] {
    background-color: #f8f9fa;
}

.table tbody td[b-0wa19lc2o6] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:last-child td[b-0wa19lc2o6] {
    border-bottom: none;
}

/* Badge Styling */
.badge[b-0wa19lc2o6] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 6px;
}

.badge.bg-warning[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: white !important;
}

.badge.bg-danger[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

.badge.bg-success[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

/* Buttons */
.btn-sm[b-0wa19lc2o6] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-outline-primary[b-0wa19lc2o6] {
    color: #667eea;
    border-color: #667eea;
}

.btn-outline-primary:hover[b-0wa19lc2o6] {
    background-color: #667eea;
    border-color: #667eea;
    color: white;
}

.btn-outline-info[b-0wa19lc2o6] {
    color: #4facfe;
    border-color: #4facfe;
}

.btn-outline-info:hover[b-0wa19lc2o6] {
    background-color: #4facfe;
    border-color: #4facfe;
    color: white;
}

.btn-outline-light[b-0wa19lc2o6] {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover[b-0wa19lc2o6] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: white;
    color: white;
}

/* Form Controls */
.form-control:focus[b-0wa19lc2o6],
.form-select:focus[b-0wa19lc2o6] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Loading State */
.spinner-border[b-0wa19lc2o6] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* Empty State */
.text-center.py-5 i[b-0wa19lc2o6] {
    opacity: 0.5;
}

/* Alert */
.alert-danger[b-0wa19lc2o6] {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    border: 1px solid #dc3545;
    border-left: 4px solid #dc3545;
}

.alert i[b-0wa19lc2o6] {
    font-size: 1.125rem;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .container-fluid[b-0wa19lc2o6] {
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .summary-card[b-0wa19lc2o6] {
        margin-bottom: 1rem;
    }

    .table[b-0wa19lc2o6] {
        font-size: 0.875rem;
    }

    .table thead th[b-0wa19lc2o6],
    .table tbody td[b-0wa19lc2o6] {
        padding: 0.75rem 0.5rem;
    }

    .employee-name[b-0wa19lc2o6] {
        font-size: 0.938rem;
    }

    .employee-email[b-0wa19lc2o6] {
        font-size: 0.8125rem;
    }

    .alert-card[b-0wa19lc2o6] {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .d-flex.justify-content-between[b-0wa19lc2o6] {
        flex-direction: column;
        gap: 1rem;
    }

    .summary-value[b-0wa19lc2o6] {
        font-size: 1.5rem;
    }

    .summary-icon[b-0wa19lc2o6] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .card-header[b-0wa19lc2o6] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start !important;
    }

    .card-header > div:last-child[b-0wa19lc2o6] {
        width: 100%;
    }

    .card-header .btn-group[b-0wa19lc2o6] {
        width: 100%;
    }

    .card-header .btn[b-0wa19lc2o6] {
        flex: 1;
    }

    /* Stack table on mobile */
    .table-responsive[b-0wa19lc2o6] {
        border: none;
    }

    .table thead[b-0wa19lc2o6] {
        display: none;
    }

    .table tbody tr[b-0wa19lc2o6] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        background: white;
    }

    .table tbody td[b-0wa19lc2o6] {
        display: block;
        text-align: left;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f8f9fa;
    }

    .table tbody td:last-child[b-0wa19lc2o6] {
        border-bottom: none;
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid #e9ecef;
    }

    .table tbody td[b-0wa19lc2o6]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .employee-info[b-0wa19lc2o6] {
        margin-bottom: 0.5rem;
    }

    .btn-sm[b-0wa19lc2o6] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-sm:last-child[b-0wa19lc2o6] {
        margin-bottom: 0;
    }

    .approval-form[b-0wa19lc2o6] {
        width: 100%;
    }

    .approval-form .btn-group[b-0wa19lc2o6] {
        width: 100%;
    }

    .approval-form .btn[b-0wa19lc2o6] {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .card-body[b-0wa19lc2o6] {
        padding: 1rem;
    }

    .summary-card[b-0wa19lc2o6] {
        padding: 1rem;
    }

    .form-label[b-0wa19lc2o6] {
        font-size: 0.875rem;
    }

    .form-control[b-0wa19lc2o6],
    .form-select[b-0wa19lc2o6] {
        font-size: 0.875rem;
    }

    .alert-card[b-0wa19lc2o6] {
        flex-direction: column;
        text-align: center;
    }

    .alert-icon[b-0wa19lc2o6] {
        margin: 0 auto;
    }

    .alert-details[b-0wa19lc2o6] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .alert-details span[b-0wa19lc2o6] {
        display: block;
    }
}
/* /Components/Admin/OvertimeSettings.razor.rz.scp.css */
.page-header[b-7nwpai0uql] {
    margin-bottom: 2rem;
}

.page-header h2[b-7nwpai0uql] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.page-header h2 i[b-7nwpai0uql] {
    color: #667eea;
    margin-right: 0.75rem;
}

.settings-card[b-7nwpai0uql] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.settings-card .card-header[b-7nwpai0uql] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.5rem;
    border: none;
}

.settings-card .card-header h5[b-7nwpai0uql] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.settings-card .card-header i[b-7nwpai0uql] {
    margin-right: 0.5rem;
}

.settings-card .card-body[b-7nwpai0uql] {
    padding: 1.5rem;
}

.settings-section[b-7nwpai0uql] {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.settings-section:last-child[b-7nwpai0uql] {
    border-bottom: none;
    padding-bottom: 0;
}

.form-label[b-7nwpai0uql] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-label strong[b-7nwpai0uql] {
    display: block;
    margin-bottom: 0.25rem;
}

.form-control[b-7nwpai0uql],
.form-select[b-7nwpai0uql] {
    border-radius: 6px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-7nwpai0uql],
.form-select:focus[b-7nwpai0uql] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.input-group-text[b-7nwpai0uql] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-left: none;
    color: #6c757d;
    font-weight: 500;
}

.form-text[b-7nwpai0uql] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.form-check[b-7nwpai0uql] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
    transition: all 0.2s ease;
}

.form-check:hover[b-7nwpai0uql] {
    background: #e9ecef;
    transform: translateX(4px);
}

.form-check-input[b-7nwpai0uql] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

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

.form-check-label[b-7nwpai0uql] {
    margin-left: 0.5rem;
    cursor: pointer;
}

.form-check-label strong[b-7nwpai0uql] {
    color: #2c3e50;
    display: block;
}

.alert[b-7nwpai0uql] {
    border-radius: 8px;
    border-left: 4px solid;
    padding: 1rem 1.25rem;
}

.alert-info[b-7nwpai0uql] {
    background: #e7f3ff;
    border-left-color: #3498db;
    color: #004085;
}

.alert-info ul[b-7nwpai0uql] {
    padding-left: 1.5rem;
}

.alert-info li[b-7nwpai0uql] {
    margin-bottom: 0.25rem;
}

.alert-success[b-7nwpai0uql] {
    background: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.alert-danger[b-7nwpai0uql] {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.btn[b-7nwpai0uql] {
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn i[b-7nwpai0uql] {
    margin-right: 0.5rem;
}

.btn-primary[b-7nwpai0uql] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-7nwpai0uql] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled[b-7nwpai0uql] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-7nwpai0uql] {
    background: #6c757d;
    border: none;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-7nwpai0uql] {
    background: #5a6268;
    transform: translateY(-2px);
}

.btn-light[b-7nwpai0uql] {
    background: white;
    border: 2px solid #e9ecef;
    color: #495057;
}

.btn-light:hover[b-7nwpai0uql] {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.navigation-card[b-7nwpai0uql] {
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navigation-card .card-body[b-7nwpai0uql] {
    padding: 1.5rem;
}

.navigation-card h6[b-7nwpai0uql] {
    color: #00695c;
    font-weight: 600;
    margin: 0;
}

.navigation-card h6 i[b-7nwpai0uql] {
    margin-right: 0.5rem;
}

.navigation-card small[b-7nwpai0uql] {
    color: #00796b;
}

.spinner-border-sm[b-7nwpai0uql] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

.text-muted[b-7nwpai0uql] {
    color: #6c757d;
}

@media (max-width: 768px) {
    .card-body[b-7nwpai0uql] {
        padding: 1rem;
    }

    .settings-section[b-7nwpai0uql] {
        padding: 1rem 0;
    }

    .d-flex.gap-3[b-7nwpai0uql] {
        flex-direction: column;
        gap: 1rem !important;
    }

    .btn[b-7nwpai0uql] {
        width: 100%;
    }
}
/* /Components/Employee/OvertimeDashboard.razor.rz.scp.css */
/* Overtime Dashboard Styling */

.container-fluid[b-aecqpef2s9] {
    max-width: 1400px;
}

/* Header Section */
.page-header[b-aecqpef2s9] {
    margin-bottom: 2rem;
}

.page-header h3[b-aecqpef2s9] {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
}

/* Stat Cards */
.stat-card[b-aecqpef2s9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    border-left: 4px solid transparent;
}

.stat-card:hover[b-aecqpef2s9] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stat-icon[b-aecqpef2s9] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-content[b-aecqpef2s9] {
    flex: 1;
}

.stat-label[b-aecqpef2s9] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stat-value[b-aecqpef2s9] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

/* Hours Card - Purple Gradient */
.hours-card[b-aecqpef2s9] {
    border-left-color: #667eea;
}

.hours-card .stat-icon[b-aecqpef2s9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.hours-card .stat-value[b-aecqpef2s9] {
    color: #667eea;
}

/* Threshold Card - Blue Gradient */
.threshold-card[b-aecqpef2s9] {
    border-left-color: #4facfe;
}

.threshold-card .stat-icon[b-aecqpef2s9] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.threshold-card .stat-value[b-aecqpef2s9] {
    color: #4facfe;
}

/* Success Card - Green Gradient (>5 hours remaining) */
.success-card[b-aecqpef2s9] {
    border-left-color: #28a745;
}

.success-card .stat-icon[b-aecqpef2s9] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.success-card .stat-value[b-aecqpef2s9] {
    color: #28a745;
}

/* Warning Card - Yellow/Orange Gradient (0-5 hours remaining) */
.warning-card[b-aecqpef2s9] {
    border-left-color: #ffc107;
}

.warning-card .stat-icon[b-aecqpef2s9] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
}

.warning-card .stat-value[b-aecqpef2s9] {
    color: #ff9800;
}

/* Danger Card - Red Gradient (overtime reached) */
.danger-card[b-aecqpef2s9] {
    border-left-color: #dc3545;
}

.danger-card .stat-icon[b-aecqpef2s9] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.danger-card .stat-value[b-aecqpef2s9] {
    color: #dc3545;
}

/* Overtime Card - Orange Gradient */
.overtime-card[b-aecqpef2s9] {
    border-left-color: #ff6b6b;
}

.overtime-card .stat-icon[b-aecqpef2s9] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
}

.overtime-card .stat-value[b-aecqpef2s9] {
    color: #ff6b6b;
}

/* Progress Card */
.progress-card[b-aecqpef2s9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-card h5[b-aecqpef2s9] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.progress-wrapper[b-aecqpef2s9] {
    position: relative;
    margin-bottom: 1rem;
}

.progress[b-aecqpef2s9] {
    height: 2rem;
    border-radius: 1rem;
    background-color: #e9ecef;
    overflow: visible;
    position: relative;
}

.progress-bar[b-aecqpef2s9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    transition: width 0.6s ease;
    position: relative;
}

.progress-bar.bg-success[b-aecqpef2s9] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.progress-bar.bg-warning[b-aecqpef2s9] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.progress-bar.bg-danger[b-aecqpef2s9] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.progress-percentage[b-aecqpef2s9] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.progress-markers[b-aecqpef2s9] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.marker[b-aecqpef2s9] {
    font-weight: 500;
}

.threshold-marker[b-aecqpef2s9] {
    font-weight: 600;
    color: #667eea;
}

/* Exempt Status Banner */
.exempt-banner[b-aecqpef2s9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exempt-banner i[b-aecqpef2s9] {
    font-size: 2rem;
}

.exempt-banner h5[b-aecqpef2s9] {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
}

.exempt-banner p[b-aecqpef2s9] {
    margin: 0;
    opacity: 0.9;
}

/* Breakdown Card */
.breakdown-card[b-aecqpef2s9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #667eea;
}

.breakdown-card h5[b-aecqpef2s9] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

.breakdown-item[b-aecqpef2s9] {
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.breakdown-item:hover[b-aecqpef2s9] {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.breakdown-item.regular[b-aecqpef2s9] {
    border-left-color: #667eea;
}

.breakdown-item.overtime[b-aecqpef2s9] {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
}

.breakdown-item.doubletime[b-aecqpef2s9] {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
}

.breakdown-label[b-aecqpef2s9] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.breakdown-hours[b-aecqpef2s9] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.breakdown-item.regular .breakdown-hours[b-aecqpef2s9] {
    color: #667eea;
}

.breakdown-item.overtime .breakdown-hours[b-aecqpef2s9] {
    color: #ff9800;
}

.breakdown-item.doubletime .breakdown-hours[b-aecqpef2s9] {
    color: #dc3545;
}

.breakdown-rate[b-aecqpef2s9] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.breakdown-cost[b-aecqpef2s9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.breakdown-multiplier[b-aecqpef2s9] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #667eea;
    margin-left: 0.5rem;
}

.breakdown-item.overtime .breakdown-multiplier[b-aecqpef2s9] {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.breakdown-item.doubletime .breakdown-multiplier[b-aecqpef2s9] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Total Cost Section */
.total-cost[b-aecqpef2s9] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
    text-align: center;
}

.total-cost-label[b-aecqpef2s9] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.total-cost-value[b-aecqpef2s9] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.overtime-premium[b-aecqpef2s9] {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 1rem;
}

/* Unapproved Alert */
.unapproved-alert[b-aecqpef2s9] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
}

.unapproved-alert i[b-aecqpef2s9] {
    color: #ff9800;
}

/* Recent Entries Section */
.recent-entries-card[b-aecqpef2s9] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.recent-entries-card h5[b-aecqpef2s9] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

/* Table Styling */
.table[b-aecqpef2s9] {
    margin-bottom: 0;
}

.table thead th[b-aecqpef2s9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 1rem;
}

.table thead th:first-child[b-aecqpef2s9] {
    border-top-left-radius: 8px;
}

.table thead th:last-child[b-aecqpef2s9] {
    border-top-right-radius: 8px;
}

.table tbody tr[b-aecqpef2s9] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-aecqpef2s9] {
    background-color: #f8f9fa;
}

.table tbody td[b-aecqpef2s9] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:last-child td[b-aecqpef2s9] {
    border-bottom: none;
}

/* Badge Styling */
.badge[b-aecqpef2s9] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 6px;
}

.badge.bg-success[b-aecqpef2s9] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.badge.bg-warning[b-aecqpef2s9] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: white !important;
}

.badge.bg-danger[b-aecqpef2s9] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

.badge.bg-secondary[b-aecqpef2s9] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
}

/* Empty State */
.empty-state[b-aecqpef2s9] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state i[b-aecqpef2s9] {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1rem;
}

.empty-state h5[b-aecqpef2s9] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p[b-aecqpef2s9] {
    color: #6c757d;
    margin: 0;
}

/* Loading State */
.loading-state[b-aecqpef2s9] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.loading-state .spinner-border[b-aecqpef2s9] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    color: #667eea;
}

/* Error Alert */
.alert-danger[b-aecqpef2s9] {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    border: 1px solid #dc3545;
    border-left: 4px solid #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card[b-aecqpef2s9] {
        margin-bottom: 1rem;
    }

    .stat-value[b-aecqpef2s9] {
        font-size: 1.5rem;
    }

    .breakdown-item[b-aecqpef2s9] {
        margin-bottom: 1rem;
    }

    .total-cost-value[b-aecqpef2s9] {
        font-size: 1.5rem;
    }

    .overtime-premium[b-aecqpef2s9] {
        display: block;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .table[b-aecqpef2s9] {
        font-size: 0.875rem;
    }

    .table thead th[b-aecqpef2s9],
    .table tbody td[b-aecqpef2s9] {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 576px) {
    .stat-card[b-aecqpef2s9] {
        padding: 1rem;
    }

    .stat-icon[b-aecqpef2s9] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .stat-value[b-aecqpef2s9] {
        font-size: 1.25rem;
    }

    .progress[b-aecqpef2s9] {
        height: 1.5rem;
    }

    .breakdown-hours[b-aecqpef2s9] {
        font-size: 1.5rem;
    }

    .breakdown-cost[b-aecqpef2s9] {
        font-size: 1rem;
    }

    /* Stack table on mobile */
    .table-responsive[b-aecqpef2s9] {
        border: none;
    }

    .table thead[b-aecqpef2s9] {
        display: none;
    }

    .table tbody tr[b-aecqpef2s9] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 0.5rem;
    }

    .table tbody td[b-aecqpef2s9] {
        display: block;
        text-align: right;
        padding: 0.5rem;
        border-bottom: 1px solid #f8f9fa;
    }

    .table tbody td:last-child[b-aecqpef2s9] {
        border-bottom: none;
    }

    .table tbody td[b-aecqpef2s9]::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #6c757d;
    }
}
/* /Components/HRIS/OrgChartNodeComponent.razor.rz.scp.css */
.org-chart-node[b-9ylyvs6chk] {
    display: inline-block;
    position: relative;
    margin: 10px;
}

.node-card[b-9ylyvs6chk] {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    min-width: 200px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.node-card:hover[b-9ylyvs6chk] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.employee-node .node-card[b-9ylyvs6chk] {
    border-color: #0d6efd;
}

.department-node .node-card[b-9ylyvs6chk] {
    border-color: #6c757d;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.node-avatar[b-9ylyvs6chk] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 10px;
    border: 3px solid #dee2e6;
    position: relative;
}

.node-avatar.manager-avatar[b-9ylyvs6chk] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
}

.manager-badge[b-9ylyvs6chk] {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #0d6efd;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.node-reports[b-9ylyvs6chk] {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e9ecef;
}

.node-reports i[b-9ylyvs6chk] {
    color: #0d6efd;
}

.node-avatar img[b-9ylyvs6chk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-9ylyvs6chk] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 24px;
}

.department-icon[b-9ylyvs6chk] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: white;
    font-size: 28px;
}

.node-info[b-9ylyvs6chk] {
    text-align: center;
}

.node-name[b-9ylyvs6chk] {
    font-weight: 600;
    font-size: 16px;
    color: #212529;
    margin-bottom: 4px;
}

.node-title[b-9ylyvs6chk] {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 4px;
}

.node-department[b-9ylyvs6chk] {
    font-size: 12px;
    color: #adb5bd;
    font-style: italic;
}

.department-name[b-9ylyvs6chk] {
    font-weight: 600;
    font-size: 16px;
    color: #495057;
    margin-bottom: 4px;
}

.department-name i[b-9ylyvs6chk] {
    color: #6c757d;
    margin-right: 5px;
}

.node-action-btn[b-9ylyvs6chk] {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.node-action-btn:hover[b-9ylyvs6chk] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.node-children[b-9ylyvs6chk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
}

/* Connection lines */
.node-children[b-9ylyvs6chk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: #dee2e6;
}

.level-0 .node-card[b-9ylyvs6chk] {
    border-width: 3px;
    font-size: 1.1em;
}

.level-1 .node-card[b-9ylyvs6chk] {
    min-width: 180px;
}

.level-2 .node-card[b-9ylyvs6chk] {
    min-width: 160px;
    font-size: 0.95em;
}

.level-3 .node-card[b-9ylyvs6chk] {
    min-width: 140px;
    font-size: 0.9em;
}

/* Responsive */
@media (max-width: 768px) {
    .node-card[b-9ylyvs6chk] {
        min-width: 150px;
        padding: 10px;
    }

    .node-avatar[b-9ylyvs6chk],
    .department-icon[b-9ylyvs6chk] {
        width: 50px;
        height: 50px;
    }

    .node-name[b-9ylyvs6chk],
    .department-name[b-9ylyvs6chk] {
        font-size: 14px;
    }

    .node-title[b-9ylyvs6chk] {
        font-size: 12px;
    }

    .node-department[b-9ylyvs6chk] {
        font-size: 11px;
    }
}

/* Toggle Employees Button */
.btn-toggle-employees[b-9ylyvs6chk] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-toggle-employees:hover[b-9ylyvs6chk] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

/* Employees List */
.employees-list[b-9ylyvs6chk] {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    max-height: 300px;
    overflow-y: auto;
}

.employee-item[b-9ylyvs6chk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: white;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.employee-item:last-child[b-9ylyvs6chk] {
    margin-bottom: 0;
}

.employee-item:hover[b-9ylyvs6chk] {
    background: #e7f3ff;
    border-color: #0d6efd;
    transform: translateX(4px);
}

.employee-avatar[b-9ylyvs6chk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.employee-avatar img[b-9ylyvs6chk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-small[b-9ylyvs6chk] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.employee-details[b-9ylyvs6chk] {
    flex: 1;
    min-width: 0;
}

.employee-name[b-9ylyvs6chk] {
    font-weight: 600;
    font-size: 14px;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-title[b-9ylyvs6chk] {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar styling for employee list */
.employees-list[b-9ylyvs6chk]::-webkit-scrollbar {
    width: 6px;
}

.employees-list[b-9ylyvs6chk]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.employees-list[b-9ylyvs6chk]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.employees-list[b-9ylyvs6chk]::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-3iwrpwirnn] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3iwrpwirnn] {
    flex: 1;
}

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

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

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

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

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

@media (max-width: 640.98px) {
    .top-row[b-3iwrpwirnn] {
        justify-content: space-between;
    }

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

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

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

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

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

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

#blazor-error-ui[b-3iwrpwirnn] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-3iwrpwirnn] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-weailgqd1v] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-weailgqd1v] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-weailgqd1v] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-weailgqd1v] {
    font-size: 1.1rem;
}

.bi[b-weailgqd1v] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-weailgqd1v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-weailgqd1v] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-weailgqd1v] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-weailgqd1v] {
        padding-bottom: 1rem;
    }

    .nav-item[b-weailgqd1v]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-weailgqd1v]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-weailgqd1v]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-weailgqd1v] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-weailgqd1v] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-weailgqd1v] {
        display: none;
    }

    .nav-scrollable[b-weailgqd1v] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hipilqnee0],
.components-reconnect-repeated-attempt-visible[b-hipilqnee0],
.components-reconnect-failed-visible[b-hipilqnee0],
.components-pause-visible[b-hipilqnee0],
.components-resume-failed-visible[b-hipilqnee0],
.components-rejoining-animation[b-hipilqnee0] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account/MyEquity.razor.rz.scp.css */
.equity-page[b-yuhix8dne5] {
    padding: 2rem;
}

.page-header h2[b-yuhix8dne5] {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

/* Stat Cards */
.stat-card[b-yuhix8dne5] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.stat-icon[b-yuhix8dne5] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.stat-content[b-yuhix8dne5] {
    flex: 1;
}

.stat-value[b-yuhix8dne5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-yuhix8dne5] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Grant Card */
.grant-card[b-yuhix8dne5] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.25rem;
    border-left: 4px solid #667eea;
}

.grant-card h6[b-yuhix8dne5] {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.vesting-progress[b-yuhix8dne5] {
    text-align: center;
}

.vesting-progress strong[b-yuhix8dne5] {
    color: #28a745;
}

.progress[b-yuhix8dne5] {
    height: 10px;
    border-radius: 5px;
}

/* Table Styling */
.table-hover tbody tr:hover[b-yuhix8dne5] {
    background-color: #f8f9fa;
}

/* Modal */
.modal.show[b-yuhix8dne5] {
    display: block;
}

.modal-content[b-yuhix8dne5] {
    border-radius: 12px;
}

.modal-header[b-yuhix8dne5] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.modal-header .btn-close[b-yuhix8dne5] {
    filter: brightness(0) invert(1);
}

/* Badges */
.badge[b-yuhix8dne5] {
    padding: 0.35em 0.65em;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .equity-page[b-yuhix8dne5] {
        padding: 1rem;
    }
    
    .stat-card[b-yuhix8dne5] {
        margin-bottom: 1rem;
    }
    
    .grant-card[b-yuhix8dne5] {
        margin-bottom: 1rem;
    }
}
/* /Components/Pages/Admin/BulkOperations.razor.rz.scp.css */
.bulk-operations-container[b-dy6usda7fo] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-dy6usda7fo] {
    margin-bottom: 2rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 1rem;
}

.page-header h2[b-dy6usda7fo] {
    color: #2c3e50;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.page-header h2 i[b-dy6usda7fo] {
    color: #4a90e2;
    margin-right: 0.75rem;
}

.loading-state[b-dy6usda7fo] {
    text-align: center;
    padding: 4rem 2rem;
}

/* Operations Grid */
.operations-grid[b-dy6usda7fo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.operation-card[b-dy6usda7fo] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.operation-card:hover[b-dy6usda7fo] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #4a90e2;
}

.operation-header[b-dy6usda7fo] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.operation-icon[b-dy6usda7fo] {
    font-size: 2rem;
    color: #4a90e2;
}

.operation-header h5[b-dy6usda7fo] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}

.operation-description[b-dy6usda7fo] {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}

.operation-stats[b-dy6usda7fo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6c757d;
}

.operation-stats span[b-dy6usda7fo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.operation-stats i[b-dy6usda7fo] {
    color: #4a90e2;
    width: 16px;
}

.operation-card .btn[b-dy6usda7fo] {
    width: 100%;
}

/* Recent Operations */
.recent-operations[b-dy6usda7fo] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.recent-operations h4[b-dy6usda7fo] {
    color: #2c3e50;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.recent-operations h4 i[b-dy6usda7fo] {
    color: #4a90e2;
    margin-right: 0.5rem;
}

/* Modal Styles */
.modal-overlay[b-dy6usda7fo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.modal-dialog[b-dy6usda7fo] {
    background: white;
    border-radius: 8px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-dialog.modal-lg[b-dy6usda7fo] {
    max-width: 900px;
}

.modal-content[b-dy6usda7fo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modal-header[b-dy6usda7fo] {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header .modal-title[b-dy6usda7fo] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.modal-header .modal-title i[b-dy6usda7fo] {
    color: #4a90e2;
    margin-right: 0.5rem;
}

.modal-header .btn-close[b-dy6usda7fo] {
    padding: 0;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.modal-header .btn-close:hover[b-dy6usda7fo] {
    opacity: 1;
}

.modal-body[b-dy6usda7fo] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-dy6usda7fo] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Operation Form */
.operation-form .form-label[b-dy6usda7fo] {
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.operation-form .form-select[b-dy6usda7fo],
.operation-form .form-control[b-dy6usda7fo],
.operation-form textarea[b-dy6usda7fo] {
    border-radius: 6px;
}

.operation-form select[multiple][b-dy6usda7fo] {
    min-height: 200px;
}

.import-preview[b-dy6usda7fo] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem;
}

.import-preview h6[b-dy6usda7fo] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .operations-grid[b-dy6usda7fo] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .bulk-operations-container[b-dy6usda7fo] {
        padding: 1rem;
    }

    .page-header h2[b-dy6usda7fo] {
        font-size: 1.5rem;
    }

    .operations-grid[b-dy6usda7fo] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .operation-card[b-dy6usda7fo] {
        padding: 1rem;
    }

    .modal-dialog[b-dy6usda7fo] {
        margin: 0.5rem;
    }

    .modal-body[b-dy6usda7fo] {
        padding: 1rem;
    }
}
/* /Components/Pages/Admin/Feedback360Admin.razor.rz.scp.css */
.admin-360-page[b-azkmb9qmf7] {
    padding: 1.5rem;
}

/* Page Header */
.page-header h2[b-azkmb9qmf7] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Metric Cards */
.metric-card[b-azkmb9qmf7] {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-azkmb9qmf7] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-icon[b-azkmb9qmf7] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.metric-icon.bg-primary[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-success[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-info[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon.bg-warning[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon i[b-azkmb9qmf7] {
    font-size: 1.5rem;
    color: white;
}

.metric-content[b-azkmb9qmf7] {
    flex: 1;
}

.metric-label[b-azkmb9qmf7] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metric-value[b-azkmb9qmf7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

.metric-detail[b-azkmb9qmf7] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Card Styling */
.card[b-azkmb9qmf7] {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-header[b-azkmb9qmf7] {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.card-header h6[b-azkmb9qmf7] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
}

/* Table Styling */
.table[b-azkmb9qmf7] {
    margin-bottom: 0;
}

.table thead th[b-azkmb9qmf7] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table tbody tr[b-azkmb9qmf7] {
    transition: all 0.3s ease;
}

.table tbody tr:hover[b-azkmb9qmf7] {
    background-color: #f8f9fa;
}

.table tbody td[b-azkmb9qmf7] {
    vertical-align: middle;
}

/* Progress Bars */
.progress[b-azkmb9qmf7] {
    background-color: #e9ecef;
    border-radius: 0.375rem;
}

.progress-bar[b-azkmb9qmf7] {
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s ease;
}

.progress-bar.bg-success[b-azkmb9qmf7] {
    background-color: #198754 !important;
}

.progress-bar.bg-info[b-azkmb9qmf7] {
    background-color: #0dcaf0 !important;
}

.progress-bar.bg-warning[b-azkmb9qmf7] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.progress-bar.bg-danger[b-azkmb9qmf7] {
    background-color: #dc3545 !important;
}

/* Badge Styling */
.badge[b-azkmb9qmf7] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Modal Styling */
.modal[b-azkmb9qmf7] {
    display: block;
}

.modal-content[b-azkmb9qmf7] {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.modal-header .btn-close[b-azkmb9qmf7] {
    filter: brightness(0) invert(1);
}

.modal-body[b-azkmb9qmf7] {
    padding: 1.5rem;
}

.modal-footer[b-azkmb9qmf7] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* Participant Selector */
.participant-selector[b-azkmb9qmf7] {
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.participant-selector .form-check[b-azkmb9qmf7] {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.participant-selector .form-check:last-child[b-azkmb9qmf7] {
    border-bottom: none;
}

.participant-groups[b-azkmb9qmf7] {
    padding: 0.75rem;
    background: #e3f2fd;
    border-radius: 0.375rem;
    border-left: 3px solid #0d6efd;
}

/* Feedback Comments */
.feedback-comments[b-azkmb9qmf7] {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Button Styling */
.btn[b-azkmb9qmf7] {
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-success[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #0e7d6f 0%, #2ec96a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.btn-primary[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-azkmb9qmf7] {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-primary[b-azkmb9qmf7] {
    border-color: #667eea;
    color: #667eea;
}

.btn-outline-primary:hover[b-azkmb9qmf7] {
    background-color: #667eea;
    color: white;
}

.btn-outline-warning[b-azkmb9qmf7] {
    border-color: #ffc107;
    color: #856404;
}

.btn-outline-warning:hover[b-azkmb9qmf7] {
    background-color: #ffc107;
    color: #000;
}

.btn-outline-success[b-azkmb9qmf7] {
    border-color: #198754;
    color: #198754;
}

.btn-outline-success:hover[b-azkmb9qmf7] {
    background-color: #198754;
    color: white;
}

.btn-outline-secondary[b-azkmb9qmf7] {
    border-color: #6c757d;
    color: #6c757d;
}

.btn-outline-secondary:hover[b-azkmb9qmf7] {
    background-color: #6c757d;
    color: white;
}

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

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

.btn-group-sm .btn[b-azkmb9qmf7] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Form Controls */
.form-label[b-azkmb9qmf7] {
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.form-label .text-danger[b-azkmb9qmf7] {
    font-weight: 700;
}

.form-select:focus[b-azkmb9qmf7],
.form-control:focus[b-azkmb9qmf7] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

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

.form-check-input:focus[b-azkmb9qmf7] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Input Groups */
.input-group-text[b-azkmb9qmf7] {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    font-weight: 600;
    color: #2c3e50;
}

/* Loading State */
.spinner-border[b-azkmb9qmf7] {
    width: 3rem;
    height: 3rem;
}

/* Empty State */
.text-center i.fa-4x[b-azkmb9qmf7] {
    opacity: 0.3;
}

/* Alerts */
.alert[b-azkmb9qmf7] {
    border-radius: 0.375rem;
    border-left-width: 4px;
}

.alert-info[b-azkmb9qmf7] {
    background-color: #e3f2fd;
    border-color: #0d6efd;
    color: #084298;
}

.alert-danger[b-azkmb9qmf7] {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.alert-secondary[b-azkmb9qmf7] {
    background-color: #e2e3e5;
    border-color: #6c757d;
    color: #383d41;
}

/* List Group */
.list-group-item[b-azkmb9qmf7] {
    border: 1px solid #e9ecef;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem !important;
    transition: all 0.3s ease;
}

.list-group-item:hover[b-azkmb9qmf7] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Star Ratings */
.fa-star.text-warning[b-azkmb9qmf7] {
    color: #ffc107 !important;
}

.fa-star.text-muted[b-azkmb9qmf7] {
    color: #dee2e6 !important;
}

/* Animations */
@keyframes fadeIn-b-azkmb9qmf7 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-card[b-azkmb9qmf7] {
    animation: fadeIn-b-azkmb9qmf7 0.5s ease;
}

.list-group-item[b-azkmb9qmf7] {
    animation: fadeIn-b-azkmb9qmf7 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-360-page[b-azkmb9qmf7] {
        padding: 1rem;
    }

    .page-header .d-flex[b-azkmb9qmf7] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-header .d-flex > div:last-child[b-azkmb9qmf7] {
        width: 100%;
    }

    .page-header .btn[b-azkmb9qmf7] {
        width: 100%;
    }

    .metric-card[b-azkmb9qmf7] {
        padding: 1rem;
    }

    .metric-icon[b-azkmb9qmf7] {
        width: 40px;
        height: 40px;
    }

    .metric-icon i[b-azkmb9qmf7] {
        font-size: 1.25rem;
    }

    .metric-value[b-azkmb9qmf7] {
        font-size: 1.5rem;
    }

    .table[b-azkmb9qmf7] {
        font-size: 0.875rem;
    }

    .btn-group[b-azkmb9qmf7] {
        flex-direction: column;
    }

    .btn-group .btn[b-azkmb9qmf7] {
        border-radius: 0.25rem !important;
    }
}

/* Scrollbar Styling */
.participant-selector[b-azkmb9qmf7]::-webkit-scrollbar {
    width: 8px;
}

.participant-selector[b-azkmb9qmf7]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.participant-selector[b-azkmb9qmf7]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.participant-selector[b-azkmb9qmf7]::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* /Components/Pages/Admin/FMLAComplianceDashboard.razor.rz.scp.css */
/* FMLA Compliance Dashboard - Section 20.3 */

.fmla-compliance-dashboard[b-5267azbuyk] {
    padding: 1.5rem;
}

/* Page Header */
.page-header h2[b-5267azbuyk] {
    color: #333;
    font-weight: 600;
}

.page-header i.bi-shield-check[b-5267azbuyk] {
    font-size: 2rem;
}

/* Metric Cards */
.metric-card[b-5267azbuyk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-5267azbuyk] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.metric-icon[b-5267azbuyk] {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.metric-content[b-5267azbuyk] {
    flex: 1;
}

.metric-label[b-5267azbuyk] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.metric-value[b-5267azbuyk] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-subtitle[b-5267azbuyk] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Metric Card Types */
.metric-total[b-5267azbuyk] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
}

.metric-total .metric-icon[b-5267azbuyk] {
    color: #6c757d;
}

.metric-total .metric-value[b-5267azbuyk] {
    color: #495057;
}

.metric-eligible[b-5267azbuyk] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
}

.metric-eligible .metric-icon[b-5267azbuyk] {
    color: #28a745;
}

.metric-eligible .metric-value[b-5267azbuyk] {
    color: #155724;
}

.metric-active[b-5267azbuyk] {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border: 2px solid #17a2b8;
}

.metric-active .metric-icon[b-5267azbuyk] {
    color: #17a2b8;
}

.metric-active .metric-value[b-5267azbuyk] {
    color: #0c5460;
}

.metric-violations[b-5267azbuyk] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
}

.metric-violations .metric-icon[b-5267azbuyk] {
    color: #ffc107;
}

.metric-violations .metric-value[b-5267azbuyk] {
    color: #856404;
}

/* Tabs */
.nav-tabs[b-5267azbuyk] {
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs .nav-link[b-5267azbuyk] {
    color: #6c757d;
    font-weight: 500;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover[b-5267azbuyk] {
    color: #495057;
    border-color: #dee2e6;
}

.nav-tabs .nav-link.active[b-5267azbuyk] {
    color: #6f42c1;
    border-color: #6f42c1;
    background: transparent;
}

/* Table Styles */
.table-hover tbody tr:hover[b-5267azbuyk] {
    background-color: #f8f9fa;
}

.employee-name[b-5267azbuyk] {
    font-weight: 600;
    color: #495057;
}

.table tbody td[b-5267azbuyk] {
    vertical-align: middle;
}

/* Progress Bar Customization */
.progress[b-5267azbuyk] {
    background-color: #e9ecef;
    border-radius: 12px;
}

.progress-bar[b-5267azbuyk] {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Violations List */
.violations-list[b-5267azbuyk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.violation-card[b-5267azbuyk] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 8px;
    border-left: 4px solid;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.violation-card:hover[b-5267azbuyk] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.violation-card.violation-high[b-5267azbuyk] {
    border-left-color: #dc3545;
    background: linear-gradient(90deg, #fff5f5 0%, white 20%);
}

.violation-card.violation-medium[b-5267azbuyk] {
    border-left-color: #ffc107;
    background: linear-gradient(90deg, #fffbf0 0%, white 20%);
}

.violation-card.violation-low[b-5267azbuyk] {
    border-left-color: #17a2b8;
    background: linear-gradient(90deg, #f0f9fb 0%, white 20%);
}

.violation-icon[b-5267azbuyk] {
    font-size: 2rem;
    flex-shrink: 0;
}

.violation-high .violation-icon[b-5267azbuyk] {
    color: #dc3545;
}

.violation-medium .violation-icon[b-5267azbuyk] {
    color: #ffc107;
}

.violation-low .violation-icon[b-5267azbuyk] {
    color: #17a2b8;
}

.violation-content[b-5267azbuyk] {
    flex: 1;
}

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

.violation-employee[b-5267azbuyk] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.violation-description[b-5267azbuyk] {
    color: #495057;
    margin-bottom: 0.5rem;
}

.violation-actions[b-5267azbuyk] {
    display: flex;
    gap: 0.5rem;
}

/* Alert Customization */
.alert-warning.alert-dismissible[b-5267azbuyk] {
    border-left: 4px solid #ffc107;
}

.alert-warning .alert-heading[b-5267azbuyk] {
    color: #856404;
}

/* Empty States */
.alert-info[b-5267azbuyk],
.alert-success[b-5267azbuyk] {
    border-left: 4px solid;
}

.alert-info[b-5267azbuyk] {
    border-left-color: #17a2b8;
}

.alert-success[b-5267azbuyk] {
    border-left-color: #28a745;
}

/* Responsive Design */
@media (max-width: 992px) {
    .metric-card[b-5267azbuyk] {
        padding: 1rem;
    }

    .metric-icon[b-5267azbuyk] {
        font-size: 2rem;
    }

    .metric-value[b-5267azbuyk] {
        font-size: 1.5rem;
    }

    .metric-label[b-5267azbuyk] {
        font-size: 0.75rem;
    }

    .metric-subtitle[b-5267azbuyk] {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .fmla-compliance-dashboard[b-5267azbuyk] {
        padding: 1rem;
    }

    .page-header[b-5267azbuyk] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .metric-card[b-5267azbuyk] {
        flex-direction: column;
        text-align: center;
    }

    .metric-content[b-5267azbuyk] {
        text-align: center;
    }

    .nav-tabs .nav-link[b-5267azbuyk] {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .table-responsive[b-5267azbuyk] {
        font-size: 0.875rem;
    }

    .violation-card[b-5267azbuyk] {
        flex-direction: column;
        text-align: center;
    }

    .violation-icon[b-5267azbuyk] {
        font-size: 1.5rem;
    }

    .violation-header[b-5267azbuyk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .violation-actions[b-5267azbuyk] {
        flex-direction: column;
        width: 100%;
    }

    .violation-actions button[b-5267azbuyk] {
        width: 100%;
    }
}

/* Loading State */
.spinner-border[b-5267azbuyk] {
    width: 3rem;
    height: 3rem;
}

/* Animation */
@keyframes fadeIn-b-5267azbuyk {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-card[b-5267azbuyk],
.card[b-5267azbuyk],
.violation-card[b-5267azbuyk] {
    animation: fadeIn-b-5267azbuyk 0.4s ease;
}

/* Stagger animations */
.metric-card:nth-child(1)[b-5267azbuyk] { animation-delay: 0.05s; }
.metric-card:nth-child(2)[b-5267azbuyk] { animation-delay: 0.1s; }
.metric-card:nth-child(3)[b-5267azbuyk] { animation-delay: 0.15s; }
.metric-card:nth-child(4)[b-5267azbuyk] { animation-delay: 0.2s; }

.violation-card:nth-child(1)[b-5267azbuyk] { animation-delay: 0.05s; }
.violation-card:nth-child(2)[b-5267azbuyk] { animation-delay: 0.1s; }
.violation-card:nth-child(3)[b-5267azbuyk] { animation-delay: 0.15s; }
.violation-card:nth-child(4)[b-5267azbuyk] { animation-delay: 0.2s; }
.violation-card:nth-child(5)[b-5267azbuyk] { animation-delay: 0.25s; }
/* /Components/Pages/Admin/LeaveCategorySettings.razor.rz.scp.css */
/* Section 20.2: Leave Category Settings - Admin Page Styling */

.leave-settings-page[b-odm3mktmc1] {
    padding: 2rem 1rem;
    background: #f8f9fa;
    min-height: 100vh;
}

.page-header[b-odm3mktmc1] {
    background: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.page-header h1[b-odm3mktmc1] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

/* Card Styling */
.card[b-odm3mktmc1] {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: fadeInUp-b-odm3mktmc1 0.4s ease-out;
}

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

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

/* Card Headers with Gradients */
.card-header.bg-primary[b-odm3mktmc1] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none;
}

.card-header.bg-success[b-odm3mktmc1] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none;
}

.card-header.bg-warning[b-odm3mktmc1] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none;
}

.card-header.bg-info[b-odm3mktmc1] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none;
}

.card-header.bg-dark[b-odm3mktmc1] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    border: none;
}

.card-header.bg-secondary[b-odm3mktmc1] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    border: none;
}

.card-header h5[b-odm3mktmc1],
.card-header h6[b-odm3mktmc1] {
    font-weight: 600;
    margin: 0;
}

/* Category Toggle Cards */
.category-toggle-card[b-odm3mktmc1] {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.category-toggle-card.enabled[b-odm3mktmc1] {
    background: #f0fdf4;
    border-color: #10b981;
}

.category-toggle-card.disabled[b-odm3mktmc1] {
    background: #f9fafb;
    border-color: #e5e7eb;
    opacity: 0.7;
}

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

.category-icon[b-odm3mktmc1] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
}

.form-check-input[b-odm3mktmc1] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.form-check-label[b-odm3mktmc1] {
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

/* Category Badge */
.category-badge[b-odm3mktmc1] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Table Styling */
.table[b-odm3mktmc1] {
    margin-bottom: 0;
}

.table th[b-odm3mktmc1] {
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.75rem;
}

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

.table-hover tbody tr:hover[b-odm3mktmc1] {
    background: #f9fafb;
}

/* Rule Sections */
.rule-section[b-odm3mktmc1] {
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border-left: 4px solid #6366f1;
}

.rule-section h6[b-odm3mktmc1] {
    color: #1f2937;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.rule-section .form-check[b-odm3mktmc1] {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.2s ease;
}

.rule-section .form-check:hover[b-odm3mktmc1] {
    background: white;
}

/* Stats */
.stat-item[b-odm3mktmc1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.stat-item:last-child[b-odm3mktmc1] {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-label[b-odm3mktmc1] {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}

.stat-value[b-odm3mktmc1] {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-value.text-success[b-odm3mktmc1] {
    color: #10b981 !important;
}

.stat-value.text-secondary[b-odm3mktmc1] {
    color: #6b7280 !important;
}

/* Buttons */
.btn[b-odm3mktmc1] {
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary[b-odm3mktmc1] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
}

.btn-primary:hover[b-odm3mktmc1] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:disabled[b-odm3mktmc1] {
    background: #9ca3af;
    transform: none;
    box-shadow: none;
}

.btn-outline-primary[b-odm3mktmc1] {
    border: 2px solid #6366f1;
    color: #6366f1;
}

.btn-outline-primary:hover[b-odm3mktmc1] {
    background: #6366f1;
    color: white;
    transform: translateY(-2px);
}

.btn-outline-secondary[b-odm3mktmc1] {
    border: 2px solid #6b7280;
    color: #6b7280;
}

.btn-outline-secondary:hover[b-odm3mktmc1] {
    background: #6b7280;
    color: white;
    transform: translateY(-2px);
}

.btn-outline-info[b-odm3mktmc1] {
    border: 2px solid #3b82f6;
    color: #3b82f6;
}

.btn-outline-info:hover[b-odm3mktmc1] {
    background: #3b82f6;
    color: white;
    transform: translateY(-2px);
}

.btn-sm[b-odm3mktmc1] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Form Controls */
.form-control[b-odm3mktmc1],
.form-select[b-odm3mktmc1] {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    transition: all 0.2s ease;
}

.form-control:focus[b-odm3mktmc1],
.form-select:focus[b-odm3mktmc1] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.form-control-sm[b-odm3mktmc1] {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
}

/* Alerts */
.alert[b-odm3mktmc1] {
    border-radius: 0.75rem;
    border: none;
    padding: 1rem 1.25rem;
    animation: slideInDown-b-odm3mktmc1 0.3s ease-out;
}

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

.alert-success[b-odm3mktmc1] {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #10b981;
}

.alert-danger[b-odm3mktmc1] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-info[b-odm3mktmc1] {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

.alert-warning[b-odm3mktmc1] {
    background: #fefce8;
    color: #854d0e;
    border-left: 4px solid #f59e0b;
}

/* Text Styles */
.text-muted[b-odm3mktmc1] {
    color: #6b7280 !important;
}

.small[b-odm3mktmc1] {
    font-size: 0.875rem;
}

/* Spinner */
.spinner-border-sm[b-odm3mktmc1] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Responsive Design */
@media (max-width: 992px) {
    .leave-settings-page[b-odm3mktmc1] {
        padding: 1rem 0.5rem;
    }

    .page-header[b-odm3mktmc1] {
        padding: 1.5rem;
    }

    .page-header h1[b-odm3mktmc1] {
        font-size: 1.5rem;
    }

    .category-toggle-card[b-odm3mktmc1] {
        padding: 0.75rem;
    }

    .category-icon[b-odm3mktmc1] {
        font-size: 1.25rem;
    }

    .rule-section[b-odm3mktmc1] {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .btn.w-100[b-odm3mktmc1] {
        margin-bottom: 0.5rem;
    }

    .stat-value[b-odm3mktmc1] {
        font-size: 1rem;
    }

    .table[b-odm3mktmc1] {
        font-size: 0.875rem;
    }

    .category-badge[b-odm3mktmc1] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Staggered Card Animations */
.col-lg-8 > .card:nth-child(1)[b-odm3mktmc1] { animation-delay: 0s; }
.col-lg-8 > .card:nth-child(2)[b-odm3mktmc1] { animation-delay: 0.1s; }
.col-lg-8 > .card:nth-child(3)[b-odm3mktmc1] { animation-delay: 0.2s; }
.col-lg-4 > .card:nth-child(1)[b-odm3mktmc1] { animation-delay: 0.3s; }
.col-lg-4 > .card:nth-child(2)[b-odm3mktmc1] { animation-delay: 0.4s; }
.col-lg-4 > .card:nth-child(3)[b-odm3mktmc1] { animation-delay: 0.5s; }

/* Smooth Transitions */
*[b-odm3mktmc1] {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* /Components/Pages/Admin/PolicyManagement.razor.rz.scp.css */
.policy-management-admin[b-8qd18cpy39] {
    padding: 1.5rem;
}

/* Reusing styles from PolicyAcknowledgments.razor.css */

/* Page Header */
.page-header h2[b-8qd18cpy39] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Metric Cards */
.metric-card[b-8qd18cpy39] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-8qd18cpy39] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-icon[b-8qd18cpy39] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.metric-icon.bg-primary[b-8qd18cpy39] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-success[b-8qd18cpy39] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-warning[b-8qd18cpy39] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-info[b-8qd18cpy39] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon i[b-8qd18cpy39] {
    font-size: 1.75rem;
    color: white;
}

.metric-content[b-8qd18cpy39] {
    flex: 1;
}

.metric-label[b-8qd18cpy39] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metric-value[b-8qd18cpy39] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

/* Card Styling */
.card[b-8qd18cpy39] {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-header[b-8qd18cpy39] {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.card-header h5[b-8qd18cpy39] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Table Styling */
.table[b-8qd18cpy39] {
    margin-bottom: 0;
}

.table thead th[b-8qd18cpy39] {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 1rem 0.75rem;
}

.table tbody td[b-8qd18cpy39] {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.table tbody tr[b-8qd18cpy39] {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover[b-8qd18cpy39] {
    background-color: #f8f9fa;
}

/* Badge Styling */
.badge[b-8qd18cpy39] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Progress Bar */
.progress[b-8qd18cpy39] {
    background-color: #e9ecef;
}

.progress-bar[b-8qd18cpy39] {
    font-weight: 500;
    font-size: 0.75rem;
}

/* Button Groups */
.btn-group-sm .btn[b-8qd18cpy39] {
    padding: 0.25rem 0.5rem;
}

/* Modal */
.modal-content[b-8qd18cpy39] {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header[b-8qd18cpy39] {
    border-bottom: 2px solid #e9ecef;
    padding: 1.5rem;
}

.modal-body[b-8qd18cpy39] {
    padding: 2rem;
}

.modal-footer[b-8qd18cpy39] {
    border-top: 2px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* Form Controls */
.form-control:focus[b-8qd18cpy39],
.form-select:focus[b-8qd18cpy39],
.form-check-input:focus[b-8qd18cpy39] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Buttons */
.btn[b-8qd18cpy39] {
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-success[b-8qd18cpy39] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-8qd18cpy39] {
    background: linear-gradient(135deg, #0e7d6f 0%, #2ec96a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.btn-primary[b-8qd18cpy39] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-8qd18cpy39] {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Empty State */
.text-center i.fa-3x[b-8qd18cpy39] {
    opacity: 0.3;
}

/* Loading State */
.spinner-border[b-8qd18cpy39] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .policy-management-admin[b-8qd18cpy39] {
        padding: 1rem;
    }

    .metric-card[b-8qd18cpy39] {
        padding: 1rem;
    }

    .metric-icon[b-8qd18cpy39] {
        width: 50px;
        height: 50px;
    }

    .metric-icon i[b-8qd18cpy39] {
        font-size: 1.5rem;
    }

    .metric-value[b-8qd18cpy39] {
        font-size: 1.5rem;
    }

    .table[b-8qd18cpy39] {
        font-size: 0.85rem;
    }

    .modal-body[b-8qd18cpy39] {
        padding: 1rem;
    }
}
/* /Components/Pages/Compensation/CompensationBands.razor.rz.scp.css */
.compensation-bands-page[b-q553eoxip2] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-q553eoxip2] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-q553eoxip2] {
    display: flex;
    gap: 8px;
}

/* Statistics Cards */
.stats-row[b-q553eoxip2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-card[b-q553eoxip2] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.stat-card:hover[b-q553eoxip2] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.stat-icon[b-q553eoxip2] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.bg-primary[b-q553eoxip2] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.bg-success[b-q553eoxip2] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-icon.bg-info[b-q553eoxip2] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.bg-warning[b-q553eoxip2] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-content[b-q553eoxip2] {
    flex-grow: 1;
}

.stat-value[b-q553eoxip2] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.stat-label[b-q553eoxip2] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Filter Bar */
.filter-bar .card-body[b-q553eoxip2] {
    padding: 20px;
}

/* Bands List */
.bands-list[b-q553eoxip2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.band-card[b-q553eoxip2] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
}

.band-card:hover[b-q553eoxip2] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.band-card.inactive[b-q553eoxip2] {
    opacity: 0.7;
    border-left-color: #6c757d;
}

.band-header[b-q553eoxip2] {
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.band-title-section[b-q553eoxip2] {
    flex-grow: 1;
}

.band-name[b-q553eoxip2] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

.band-badges[b-q553eoxip2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.band-badges .badge[b-q553eoxip2] {
    font-size: 0.75rem;
    padding: 4px 10px;
}

.band-status .badge[b-q553eoxip2] {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.band-body[b-q553eoxip2] {
    padding: 20px;
}

.band-description[b-q553eoxip2] {
    color: #495057;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

/* Salary Range Visualization */
.salary-range-visual[b-q553eoxip2] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
}

.range-labels[b-q553eoxip2] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.range-label[b-q553eoxip2] {
    text-align: left;
}

.range-label.mid[b-q553eoxip2] {
    text-align: center;
}

.label-text[b-q553eoxip2] {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-value[b-q553eoxip2] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
}

.range-bar[b-q553eoxip2] {
    position: relative;
    height: 24px;
    background-color: #dee2e6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.range-fill[b-q553eoxip2] {
    height: 100%;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    position: relative;
}

.range-midpoint[b-q553eoxip2] {
    position: absolute;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.range-info[b-q553eoxip2] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Band Metrics */
.band-metrics[b-q553eoxip2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.metric-item[b-q553eoxip2] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.metric-item i[b-q553eoxip2] {
    width: 24px;
}

.band-footer[b-q553eoxip2] {
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.band-meta[b-q553eoxip2] {
    font-size: 0.85rem;
}

.band-actions[b-q553eoxip2] {
    display: flex;
    gap: 8px;
}

.band-actions .btn[b-q553eoxip2] {
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Empty State */
.empty-state[b-q553eoxip2] {
    grid-column: 1 / -1;
}

.empty-state i[b-q553eoxip2] {
    color: #dee2e6;
}

.empty-state h5[b-q553eoxip2] {
    color: #6c757d;
    margin-bottom: 8px;
}

/* Modal */
.modal.show[b-q553eoxip2] {
    display: block;
}

.modal-backdrop.show[b-q553eoxip2] {
    opacity: 0.5;
}

.modal-header[b-q553eoxip2] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.modal-title[b-q553eoxip2] {
    color: #2c3e50;
    font-weight: 600;
}

.modal-body[b-q553eoxip2] {
    padding: 24px;
}

.modal-footer[b-q553eoxip2] {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
    padding: 16px 24px;
}

/* Analytics Modal */
.analytics-stat[b-q553eoxip2] {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.analytics-stat .stat-value[b-q553eoxip2] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
}

.analytics-stat .stat-label[b-q553eoxip2] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 8px;
}

.distribution-chart[b-q553eoxip2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.distribution-item[b-q553eoxip2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quartile-label[b-q553eoxip2] {
    min-width: 120px;
    font-size: 0.9rem;
    color: #495057;
}

.percentage[b-q553eoxip2] {
    min-width: 50px;
    text-align: right;
    font-weight: 600;
    color: #2c3e50;
}

.compliance-summary[b-q553eoxip2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compliance-item[b-q553eoxip2] {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.compliance-item.success[b-q553eoxip2] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.compliance-item.warning[b-q553eoxip2] {
    background-color: #fff3cd;
    color: #664d03;
}

.compliance-item.danger[b-q553eoxip2] {
    background-color: #f8d7da;
    color: #842029;
}

/* Form Elements */
.form-label[b-q553eoxip2] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-q553eoxip2],
.form-select[b-q553eoxip2] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-q553eoxip2],
.form-select:focus[b-q553eoxip2] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

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

/* Buttons */
.btn[b-q553eoxip2] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-q553eoxip2] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover:not(:disabled)[b-q553eoxip2] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Alerts */
.alert[b-q553eoxip2] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-q553eoxip2] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-q553eoxip2] {
    background-color: #f8d7da;
    color: #842029;
}

.alert-info[b-q553eoxip2] {
    background-color: #cfe2ff;
    color: #084298;
}

/* Badge Styles */
.badge[b-q553eoxip2] {
    font-weight: 500;
}

/* Card Styles */
.card[b-q553eoxip2] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* Loading State */
.spinner-border[b-q553eoxip2] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-row[b-q553eoxip2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .compensation-bands-page[b-q553eoxip2] {
        padding: 16px;
    }

    .header-actions[b-q553eoxip2] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-q553eoxip2] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-header[b-q553eoxip2] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .stats-row[b-q553eoxip2] {
        grid-template-columns: 1fr;
    }

    .band-header[b-q553eoxip2] {
        flex-direction: column;
        gap: 12px;
    }

    .band-footer[b-q553eoxip2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .band-actions[b-q553eoxip2] {
        width: 100%;
        justify-content: space-between;
    }

    .range-labels[b-q553eoxip2] {
        font-size: 0.85rem;
    }

    .label-value[b-q553eoxip2] {
        font-size: 0.95rem;
    }

    .modal-dialog[b-q553eoxip2] {
        margin: 8px;
    }

    .filter-bar .col-md-4[b-q553eoxip2],
    .filter-bar .col-md-3[b-q553eoxip2],
    .filter-bar .col-md-2[b-q553eoxip2] {
        margin-bottom: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-q553eoxip2 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.band-card[b-q553eoxip2] {
    animation: fadeIn-b-q553eoxip2 0.3s ease;
}
/* /Components/Pages/Compensation/CompensationReviewWorkflow.razor.rz.scp.css */
.review-workflow-page[b-reodfxronw] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-reodfxronw] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-reodfxronw] {
    display: flex;
    gap: 8px;
}

/* Active Cycles */
.cycles-grid[b-reodfxronw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}

.cycle-card[b-reodfxronw] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
}

.cycle-card:hover[b-reodfxronw] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.cycle-card.active[b-reodfxronw] {
    border-left-color: #11998e;
}

.cycle-card.planning[b-reodfxronw] {
    border-left-color: #4facfe;
}

.cycle-card.completed[b-reodfxronw] {
    border-left-color: #38ef7d;
}

.cycle-header[b-reodfxronw] {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.cycle-title[b-reodfxronw] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 4px;
}

.cycle-year[b-reodfxronw] {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.cycle-status-badge[b-reodfxronw] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.cycle-status-badge.active[b-reodfxronw] {
    background: #d1f4dd;
    color: #0f5132;
}

.cycle-status-badge.planning[b-reodfxronw] {
    background: #cfe2ff;
    color: #084298;
}

.cycle-status-badge.completed[b-reodfxronw] {
    background: #d1e7dd;
    color: #0f5132;
}

.cycle-body[b-reodfxronw] {
    padding: 20px;
}

.cycle-dates[b-reodfxronw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.date-item[b-reodfxronw] {
    display: flex;
    align-items: center;
    color: #495057;
    font-size: 0.9rem;
}

.cycle-stats[b-reodfxronw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.stat-item[b-reodfxronw] {
    text-align: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-value[b-reodfxronw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

.stat-label[b-reodfxronw] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cycle-progress[b-reodfxronw] {
    margin-bottom: 16px;
}

.progress-label[b-reodfxronw] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 8px;
}

.progress[b-reodfxronw] {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.progress-bar[b-reodfxronw] {
    background: linear-gradient(90deg, #667eea 0%, #11998e 100%);
    border-radius: 4px;
}

.cycle-footer[b-reodfxronw] {
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 8px;
}

/* Pending Approvals */
.pending-approvals .card-header[b-reodfxronw] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.approval-filters[b-reodfxronw] {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.proposals-list[b-reodfxronw] {
    max-height: 600px;
    overflow-y: auto;
}

.proposal-item[b-reodfxronw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    background: white;
}

.proposal-item:hover[b-reodfxronw] {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.proposal-checkbox[b-reodfxronw] {
    flex-shrink: 0;
}

.proposal-checkbox .form-check-input[b-reodfxronw] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.proposal-info[b-reodfxronw] {
    flex-grow: 1;
}

.proposal-header[b-reodfxronw] {
    margin-bottom: 8px;
}

.proposal-header strong[b-reodfxronw] {
    color: #2c3e50;
    font-size: 1.05rem;
}

.proposal-details[b-reodfxronw] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.detail-badge[b-reodfxronw] {
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #495057;
}

.detail-badge.increase[b-reodfxronw] {
    background: #d1f4dd;
    color: #0f5132;
    font-weight: 600;
}

.detail-badge.rating[b-reodfxronw] {
    background: #fff3cd;
    color: #664d03;
}

.proposal-justification[b-reodfxronw] {
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
    padding: 8px 12px;
    background: #f8f9fa;
    border-left: 3px solid #667eea;
    border-radius: 4px;
}

.proposal-actions[b-reodfxronw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.proposal-actions .btn[b-reodfxronw] {
    min-width: 100px;
}

/* Bulk Actions */
.bulk-actions[b-reodfxronw] {
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.selected-count[b-reodfxronw] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.selected-cost[b-reodfxronw] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #667eea;
}

.bulk-buttons[b-reodfxronw] {
    display: flex;
    gap: 12px;
}

/* Empty State */
.empty-state i[b-reodfxronw] {
    color: #11998e;
}

.empty-state h5[b-reodfxronw] {
    color: #2c3e50;
    margin-bottom: 8px;
}

/* Past Cycles Table */
.table[b-reodfxronw] {
    background: white;
}

.table thead[b-reodfxronw] {
    background: #f8f9fa;
}

.table th[b-reodfxronw] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.table tbody tr:hover[b-reodfxronw] {
    background-color: #f8f9fa;
}

/* Modal */
.modal.show[b-reodfxronw] {
    display: block;
}

.modal-backdrop.show[b-reodfxronw] {
    opacity: 0.5;
}

.modal-header[b-reodfxronw] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modal-title[b-reodfxronw] {
    font-weight: 600;
}

.modal-body[b-reodfxronw] {
    padding: 24px;
}

.modal-footer[b-reodfxronw] {
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
}

/* Form Elements */
.form-label[b-reodfxronw] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-reodfxronw],
.form-select[b-reodfxronw] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-reodfxronw],
.form-select:focus[b-reodfxronw] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

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

/* Buttons */
.btn[b-reodfxronw] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-sm[b-reodfxronw] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-primary[b-reodfxronw] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-reodfxronw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-success[b-reodfxronw] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-reodfxronw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(17, 153, 142, 0.4);
}

.btn-danger[b-reodfxronw] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    border: none;
}

.btn-danger:hover[b-reodfxronw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
}

/* Alerts */
.alert[b-reodfxronw] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-reodfxronw] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-reodfxronw] {
    background-color: #f8d7da;
    color: #842029;
}

/* Card Styles */
.card[b-reodfxronw] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-header[b-reodfxronw] {
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.card-body[b-reodfxronw] {
    padding: 24px;
}

/* Badge Styles */
.badge[b-reodfxronw] {
    font-weight: 500;
    padding: 4px 10px;
}

/* Loading State */
.spinner-border[b-reodfxronw] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .cycles-grid[b-reodfxronw] {
        grid-template-columns: 1fr;
    }

    .bulk-actions[b-reodfxronw] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .bulk-buttons[b-reodfxronw] {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .review-workflow-page[b-reodfxronw] {
        padding: 16px;
    }

    .cycle-stats[b-reodfxronw] {
        grid-template-columns: 1fr;
    }

    .proposal-item[b-reodfxronw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .proposal-actions[b-reodfxronw] {
        flex-direction: row;
        width: 100%;
    }

    .proposal-actions .btn[b-reodfxronw] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .page-header[b-reodfxronw] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-reodfxronw] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-reodfxronw] {
        width: 100%;
    }

    .cycle-footer[b-reodfxronw] {
        flex-direction: column;
    }

    .cycle-footer .btn[b-reodfxronw] {
        width: 100%;
    }

    .proposal-details[b-reodfxronw] {
        flex-direction: column;
    }

    .approval-filters .row .col-md-4[b-reodfxronw] {
        margin-bottom: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-reodfxronw {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cycle-card[b-reodfxronw],
.proposal-item[b-reodfxronw] {
    animation: fadeIn-b-reodfxronw 0.3s ease;
}

/* Scrollbar Styling */
.proposals-list[b-reodfxronw]::-webkit-scrollbar {
    width: 8px;
}

.proposals-list[b-reodfxronw]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.proposals-list[b-reodfxronw]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.proposals-list[b-reodfxronw]::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* /Components/Pages/Compensation/MeritIncreaseCalculator.razor.rz.scp.css */
.merit-calculator-page[b-1ayj1mnfeh] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-1ayj1mnfeh] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-1ayj1mnfeh] {
    display: flex;
    gap: 8px;
}

/* Calculator Tabs */
.calculator-tabs[b-1ayj1mnfeh] {
    display: flex;
    gap: 12px;
    background: white;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tab-button[b-1ayj1mnfeh] {
    flex: 1;
    padding: 16px 24px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-button:hover[b-1ayj1mnfeh] {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

.tab-button.active[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Calculator Panel */
.calculator-panel[b-1ayj1mnfeh] {
    animation: fadeIn-b-1ayj1mnfeh 0.3s ease;
}

.calculator-panel .card-header[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.calculator-panel .card-header.bg-success[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.calculator-panel .card-header.bg-info[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Recommendation Result */
.recommendation-result[b-1ayj1mnfeh] {
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #667eea;
}

.result-header h4[b-1ayj1mnfeh] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 4px;
}

.result-cards[b-1ayj1mnfeh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.result-card[b-1ayj1mnfeh] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.result-card.primary[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.result-card.success[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.result-label[b-1ayj1mnfeh] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.result-value[b-1ayj1mnfeh] {
    font-size: 2rem;
    font-weight: 700;
}

.result-value .percentage[b-1ayj1mnfeh] {
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 8px;
}

/* Compa-Ratio Comparison */
.compa-ratio-comparison[b-1ayj1mnfeh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
}

.compa-item[b-1ayj1mnfeh] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compa-label[b-1ayj1mnfeh] {
    font-size: 0.85rem;
    color: #6c757d;
}

.compa-value[b-1ayj1mnfeh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Justification & Considerations */
.justification-box[b-1ayj1mnfeh],
.considerations-box[b-1ayj1mnfeh] {
    padding: 16px;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.justification-box h6[b-1ayj1mnfeh],
.considerations-box h6[b-1ayj1mnfeh] {
    color: #2c3e50;
    margin-bottom: 8px;
}

.considerations-box ul[b-1ayj1mnfeh] {
    margin: 0;
    padding-left: 20px;
}

/* Result Actions */
.result-actions[b-1ayj1mnfeh] {
    display: flex;
    gap: 12px;
}

/* Employee Selector */
.employee-selector[b-1ayj1mnfeh] {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.employee-checkbox[b-1ayj1mnfeh] {
    display: flex;
    align-items: center;
    padding: 10px;
    background: white;
    margin-bottom: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.employee-checkbox:hover[b-1ayj1mnfeh] {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.employee-name[b-1ayj1mnfeh] {
    flex-grow: 1;
    margin-left: 12px;
    font-weight: 500;
    color: #2c3e50;
}

.employee-salary[b-1ayj1mnfeh] {
    color: #6c757d;
    font-weight: 600;
}

/* Batch Results */
.batch-results[b-1ayj1mnfeh] {
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
}

.batch-summary[b-1ayj1mnfeh] {
    margin-bottom: 24px;
}

.summary-stats[b-1ayj1mnfeh] {
    display: flex;
    gap: 32px;
    margin-top: 12px;
}

.summary-stats .stat[b-1ayj1mnfeh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label[b-1ayj1mnfeh] {
    font-size: 0.85rem;
    color: #6c757d;
}

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

.batch-list[b-1ayj1mnfeh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.batch-item[b-1ayj1mnfeh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.batch-employee[b-1ayj1mnfeh] {
    display: flex;
    flex-direction: column;
}

.batch-amounts[b-1ayj1mnfeh] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
}

.batch-amounts .current[b-1ayj1mnfeh] {
    color: #6c757d;
}

.batch-amounts .new[b-1ayj1mnfeh] {
    color: #11998e;
    font-weight: 600;
}

.batch-amounts .increase[b-1ayj1mnfeh] {
    color: #667eea;
    font-weight: 600;
}

.batch-actions[b-1ayj1mnfeh] {
    display: flex;
    gap: 12px;
}

/* What-If Scenario */
.whatif-result[b-1ayj1mnfeh] {
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
}

.scenario-comparison[b-1ayj1mnfeh] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 24px;
}

.comparison-col[b-1ayj1mnfeh] {
    flex: 1;
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
}

.comparison-col h6[b-1ayj1mnfeh] {
    color: #6c757d;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.comparison-value[b-1ayj1mnfeh] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 12px 0;
}

.comparison-meta[b-1ayj1mnfeh] {
    color: #6c757d;
    font-size: 0.9rem;
}

.comparison-arrow[b-1ayj1mnfeh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #667eea;
    font-size: 2rem;
    padding: 0 20px;
}

.comparison-change[b-1ayj1mnfeh] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 8px;
    text-align: center;
}

.scenario-indicators[b-1ayj1mnfeh] {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.indicator[b-1ayj1mnfeh] {
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
}

.indicator.success[b-1ayj1mnfeh] {
    background: #d1e7dd;
    color: #0f5132;
}

.indicator.warning[b-1ayj1mnfeh] {
    background: #fff3cd;
    color: #664d03;
}

.indicator.info[b-1ayj1mnfeh] {
    background: #cfe2ff;
    color: #084298;
}

.scenario-warnings[b-1ayj1mnfeh] {
    padding: 16px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
}

.scenario-warnings h6[b-1ayj1mnfeh] {
    color: #664d03;
    margin-bottom: 8px;
}

.scenario-warnings ul[b-1ayj1mnfeh] {
    margin: 0;
    padding-left: 20px;
    color: #664d03;
}

.scenario-actions[b-1ayj1mnfeh] {
    display: flex;
    gap: 12px;
}

/* Form Elements */
.form-label[b-1ayj1mnfeh] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-1ayj1mnfeh],
.form-select[b-1ayj1mnfeh] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-1ayj1mnfeh],
.form-select:focus[b-1ayj1mnfeh] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

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

/* Buttons */
.btn[b-1ayj1mnfeh] {
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 10px 20px;
}

.btn-lg[b-1ayj1mnfeh] {
    padding: 14px 28px;
    font-size: 1.1rem;
}

.btn-primary[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover:not(:disabled)[b-1ayj1mnfeh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-success[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover:not(:disabled)[b-1ayj1mnfeh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(17, 153, 142, 0.4);
}

.btn-info[b-1ayj1mnfeh] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    color: white;
}

.btn-info:hover:not(:disabled)[b-1ayj1mnfeh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
}

.btn:disabled[b-1ayj1mnfeh] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.alert[b-1ayj1mnfeh] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-1ayj1mnfeh] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-1ayj1mnfeh] {
    background-color: #f8d7da;
    color: #842029;
}

/* Card Styles */
.card[b-1ayj1mnfeh] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-header[b-1ayj1mnfeh] {
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.card-body[b-1ayj1mnfeh] {
    padding: 24px;
}

/* Loading State */
.spinner-border[b-1ayj1mnfeh] {
    width: 3rem;
    height: 3rem;
}

/* Animations */
@keyframes fadeIn-b-1ayj1mnfeh {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .result-cards[b-1ayj1mnfeh] {
        grid-template-columns: 1fr;
    }

    .summary-stats[b-1ayj1mnfeh] {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .merit-calculator-page[b-1ayj1mnfeh] {
        padding: 16px;
    }

    .calculator-tabs[b-1ayj1mnfeh] {
        flex-direction: column;
    }

    .tab-button[b-1ayj1mnfeh] {
        padding: 12px 16px;
    }

    .scenario-comparison[b-1ayj1mnfeh] {
        flex-direction: column;
        gap: 16px;
    }

    .comparison-arrow[b-1ayj1mnfeh] {
        transform: rotate(90deg);
    }

    .batch-item[b-1ayj1mnfeh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .batch-amounts[b-1ayj1mnfeh] {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .page-header[b-1ayj1mnfeh] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-1ayj1mnfeh] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-1ayj1mnfeh] {
        width: 100%;
    }

    .result-value[b-1ayj1mnfeh] {
        font-size: 1.5rem;
    }

    .result-value .percentage[b-1ayj1mnfeh] {
        font-size: 1rem;
    }

    .result-actions[b-1ayj1mnfeh],
    .batch-actions[b-1ayj1mnfeh],
    .scenario-actions[b-1ayj1mnfeh] {
        flex-direction: column;
    }

    .result-actions button[b-1ayj1mnfeh],
    .batch-actions button[b-1ayj1mnfeh],
    .scenario-actions button[b-1ayj1mnfeh] {
        width: 100%;
    }
}
/* /Components/Pages/Compensation/SalaryHistoryTimeline.razor.rz.scp.css */
.salary-history-page[b-ji8r4964ec] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-ji8r4964ec] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-ji8r4964ec] {
    display: flex;
    gap: 8px;
}

/* Summary Cards */
.summary-row[b-ji8r4964ec] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.summary-card[b-ji8r4964ec] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.summary-card:hover[b-ji8r4964ec] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.summary-icon[b-ji8r4964ec] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.summary-icon.bg-primary[b-ji8r4964ec] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.summary-icon.bg-success[b-ji8r4964ec] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.summary-icon.bg-info[b-ji8r4964ec] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.summary-icon.bg-warning[b-ji8r4964ec] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.summary-content[b-ji8r4964ec] {
    flex-grow: 1;
}

.summary-label[b-ji8r4964ec] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-ji8r4964ec] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

/* Filter Controls */
.filter-controls .card-body[b-ji8r4964ec] {
    padding: 20px;
}

/* Salary Chart */
.salary-chart[b-ji8r4964ec] {
    margin-bottom: 24px;
}

.salary-chart .card-header[b-ji8r4964ec] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.chart-area[b-ji8r4964ec] {
    padding: 20px;
    min-height: 350px;
}

.salary-line-chart[b-ji8r4964ec] {
    width: 100%;
    height: auto;
}

/* Timeline Container */
.timeline-container[b-ji8r4964ec] {
    position: relative;
}

.timeline[b-ji8r4964ec] {
    position: relative;
    padding: 20px 0;
}

.timeline[b-ji8r4964ec]::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #667eea, #11998e);
}

.timeline-item[b-ji8r4964ec] {
    position: relative;
    margin-bottom: 40px;
    padding-left: 80px;
}

.timeline-marker[b-ji8r4964ec] {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-icon[b-ji8r4964ec] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-icon[b-ji8r4964ec] {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.timeline-content[b-ji8r4964ec] {
    animation: slideInRight-b-ji8r4964ec 0.5s ease;
    border-left: 4px solid #667eea;
}

.timeline-item.newhire .timeline-content[b-ji8r4964ec] { border-left-color: #667eea; }
.timeline-item.meritincrease .timeline-content[b-ji8r4964ec] { border-left-color: #11998e; }
.timeline-item.promotion .timeline-content[b-ji8r4964ec] { border-left-color: #f093fb; }
.timeline-item.adjustment .timeline-content[b-ji8r4964ec] { border-left-color: #4facfe; }
.timeline-item.bonus .timeline-content[b-ji8r4964ec] { border-left-color: #feca57; }
.timeline-item.marketcorrection .timeline-content[b-ji8r4964ec] { border-left-color: #48dbfb; }
.timeline-item.costofliving .timeline-content[b-ji8r4964ec] { border-left-color: #ff9ff3; }

.timeline-header[b-ji8r4964ec] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 16px;
}

.timeline-title[b-ji8r4964ec] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

.timeline-date[b-ji8r4964ec] {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.timeline-amount[b-ji8r4964ec] {
    text-align: right;
}

.new-salary[b-ji8r4964ec] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.salary-change[b-ji8r4964ec] {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 4px;
}

.salary-change.positive[b-ji8r4964ec] {
    color: #11998e;
}

.salary-change.negative[b-ji8r4964ec] {
    color: #e74c3c;
}

.timeline-details[b-ji8r4964ec] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-row[b-ji8r4964ec] {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.detail-label[b-ji8r4964ec] {
    color: #6c757d;
    font-size: 0.85rem;
}

.detail-value[b-ji8r4964ec] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.9rem;
}

.timeline-reason[b-ji8r4964ec] {
    padding: 12px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 0.9rem;
    color: #664d03;
}

.band-info[b-ji8r4964ec] {
    margin-top: 16px;
    padding: 12px;
    background-color: #e7f3ff;
    border-radius: 8px;
}

.band-badge[b-ji8r4964ec] {
    color: #0d6efd;
    font-weight: 600;
    margin-bottom: 8px;
}

.band-metrics[b-ji8r4964ec] {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
}

.band-metrics .metric[b-ji8r4964ec] {
    color: #495057;
}

.approval-info[b-ji8r4964ec] {
    margin-top: 16px;
    padding: 8px 12px;
    background-color: #d1e7dd;
    border-radius: 6px;
    color: #0f5132;
    font-size: 0.9rem;
}

/* Progression Summary */
.progression-summary .card-header[b-ji8r4964ec] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.progression-stat[b-ji8r4964ec] {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.progression-stat .stat-label[b-ji8r4964ec] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.progression-stat .stat-value[b-ji8r4964ec] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.change-type-breakdown[b-ji8r4964ec] {
    margin-top: 24px;
}

.change-type-stat[b-ji8r4964ec] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.change-type-icon[b-ji8r4964ec] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.change-type-name[b-ji8r4964ec] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
}

.change-type-count[b-ji8r4964ec] {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Empty State */
.empty-state i[b-ji8r4964ec] {
    color: #dee2e6;
}

.empty-state h5[b-ji8r4964ec] {
    color: #6c757d;
    margin-bottom: 8px;
}

/* Form Elements */
.form-label[b-ji8r4964ec] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-ji8r4964ec],
.form-select[b-ji8r4964ec] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-ji8r4964ec],
.form-select:focus[b-ji8r4964ec] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

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

/* Buttons */
.btn[b-ji8r4964ec] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-ji8r4964ec] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-ji8r4964ec] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Alerts */
.alert[b-ji8r4964ec] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-ji8r4964ec] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-ji8r4964ec] {
    background-color: #f8d7da;
    color: #842029;
}

.alert-warning[b-ji8r4964ec] {
    background-color: #fff3cd;
    color: #664d03;
}

/* Loading State */
.spinner-border[b-ji8r4964ec] {
    width: 3rem;
    height: 3rem;
}

/* Card Styles */
.card[b-ji8r4964ec] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-header[b-ji8r4964ec] {
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.card-body[b-ji8r4964ec] {
    padding: 24px;
}

/* Animations */
@keyframes slideInRight-b-ji8r4964ec {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Responsive Design */
@media (max-width: 1200px) {
    .summary-row[b-ji8r4964ec] {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-details[b-ji8r4964ec] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .salary-history-page[b-ji8r4964ec] {
        padding: 16px;
    }

    .header-actions[b-ji8r4964ec] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-ji8r4964ec] {
        width: 100%;
    }

    .timeline[b-ji8r4964ec]::before {
        left: 15px;
    }

    .timeline-item[b-ji8r4964ec] {
        padding-left: 65px;
    }

    .timeline-marker[b-ji8r4964ec] {
        width: 45px;
        height: 45px;
    }

    .timeline-icon[b-ji8r4964ec] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .page-header[b-ji8r4964ec] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .summary-row[b-ji8r4964ec] {
        grid-template-columns: 1fr;
    }

    .timeline-header[b-ji8r4964ec] {
        flex-direction: column;
        gap: 16px;
    }

    .timeline-amount[b-ji8r4964ec] {
        text-align: left;
    }

    .new-salary[b-ji8r4964ec] {
        font-size: 1.5rem;
    }

    .band-metrics[b-ji8r4964ec] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-controls .col-md-4[b-ji8r4964ec],
    .filter-controls .col-md-2[b-ji8r4964ec] {
        margin-bottom: 12px;
    }

    .change-type-breakdown .row .col-md-3[b-ji8r4964ec] {
        margin-bottom: 16px;
    }
}

/* Print Styles */
@media print {
    .header-actions[b-ji8r4964ec],
    .filter-controls[b-ji8r4964ec],
    .btn[b-ji8r4964ec] {
        display: none !important;
    }

    .timeline-content[b-ji8r4964ec] {
        break-inside: avoid;
    }

    .salary-chart[b-ji8r4964ec] {
        break-inside: avoid;
    }
}
/* /Components/Pages/Compliance/PolicyAcknowledgments.razor.rz.scp.css */
.policy-acknowledgment-portal[b-tmbaj9b0cs] {
    padding: 1.5rem;
}

/* Page Header */
.page-header h2[b-tmbaj9b0cs] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Metric Cards */
.metric-card[b-tmbaj9b0cs] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-tmbaj9b0cs] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-icon[b-tmbaj9b0cs] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.metric-icon.bg-warning[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-danger[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.metric-icon.bg-success[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-info[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon i[b-tmbaj9b0cs] {
    font-size: 1.75rem;
    color: white;
}

.metric-content[b-tmbaj9b0cs] {
    flex: 1;
}

.metric-label[b-tmbaj9b0cs] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metric-value[b-tmbaj9b0cs] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

/* Card Styling */
.card[b-tmbaj9b0cs] {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-header[b-tmbaj9b0cs] {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.card-header h5[b-tmbaj9b0cs] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.1rem;
}

/* List Group Items */
.list-group-item[b-tmbaj9b0cs] {
    padding: 1.5rem;
    border-left: none;
    border-right: none;
    transition: background-color 0.2s ease;
}

.list-group-item:hover[b-tmbaj9b0cs] {
    background-color: #f8f9fa;
}

.list-group-item:first-child[b-tmbaj9b0cs] {
    border-top: none;
}

.list-group-item h6[b-tmbaj9b0cs] {
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.policy-meta[b-tmbaj9b0cs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.policy-meta .small[b-tmbaj9b0cs] {
    font-size: 0.875rem;
}

/* Badge Styling */
.badge[b-tmbaj9b0cs] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Modal */
.modal-content[b-tmbaj9b0cs] {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header[b-tmbaj9b0cs] {
    border-bottom: 2px solid #e9ecef;
    padding: 1.5rem;
}

.modal-body[b-tmbaj9b0cs] {
    padding: 2rem;
}

.modal-footer[b-tmbaj9b0cs] {
    border-top: 2px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* Policy Content */
.policy-content[b-tmbaj9b0cs] {
    font-size: 1rem;
    line-height: 1.7;
    color: #2c3e50;
}

.policy-content h1[b-tmbaj9b0cs],
.policy-content h2[b-tmbaj9b0cs],
.policy-content h3[b-tmbaj9b0cs],
.policy-content h4[b-tmbaj9b0cs] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.policy-content p[b-tmbaj9b0cs] {
    margin-bottom: 1rem;
}

.policy-content ul[b-tmbaj9b0cs],
.policy-content ol[b-tmbaj9b0cs] {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.policy-content li[b-tmbaj9b0cs] {
    margin-bottom: 0.5rem;
}

/* Acknowledgment Form */
.acknowledgment-form[b-tmbaj9b0cs] {
    border: 2px solid #dee2e6;
}

.acknowledgment-form h5[b-tmbaj9b0cs] {
    color: #2c3e50;
    font-weight: 600;
}

.form-check[b-tmbaj9b0cs] {
    padding: 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.form-check:hover[b-tmbaj9b0cs] {
    background-color: rgba(102, 126, 234, 0.05);
}

.form-check-input[b-tmbaj9b0cs] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    cursor: pointer;
}

.form-check-label[b-tmbaj9b0cs] {
    cursor: pointer;
    user-select: none;
}

/* Signature Pad */
.signature-pad-container canvas[b-tmbaj9b0cs] {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
}

/* Table Styling */
.table[b-tmbaj9b0cs] {
    margin-bottom: 0;
}

.table thead th[b-tmbaj9b0cs] {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 1rem 0.75rem;
}

.table tbody td[b-tmbaj9b0cs] {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.table tbody tr[b-tmbaj9b0cs] {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover[b-tmbaj9b0cs] {
    background-color: #f8f9fa;
}

/* Empty State */
.text-center i.fa-4x[b-tmbaj9b0cs] {
    opacity: 0.3;
}

/* Buttons */
.btn[b-tmbaj9b0cs] {
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-success[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-tmbaj9b0cs] {
    background: linear-gradient(135deg, #0e7d6f 0%, #2ec96a 100%);
}

/* Alert Banner */
.alert-banner[b-tmbaj9b0cs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .policy-acknowledgment-portal[b-tmbaj9b0cs] {
        padding: 1rem;
    }

    .metric-card[b-tmbaj9b0cs] {
        padding: 1rem;
    }

    .metric-icon[b-tmbaj9b0cs] {
        width: 50px;
        height: 50px;
    }

    .metric-icon i[b-tmbaj9b0cs] {
        font-size: 1.5rem;
    }

    .metric-value[b-tmbaj9b0cs] {
        font-size: 1.5rem;
    }

    .list-group-item[b-tmbaj9b0cs] {
        padding: 1rem;
    }

    .modal-body[b-tmbaj9b0cs] {
        padding: 1rem;
    }
}

/* Loading State */
.spinner-border[b-tmbaj9b0cs] {
    width: 3rem;
    height: 3rem;
}

/* Form Control */
.form-control:focus[b-tmbaj9b0cs],
.form-check-input:focus[b-tmbaj9b0cs] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
/* /Components/Pages/Compliance/RetentionPolicies.razor.rz.scp.css */
.retention-policies-page[b-gyy2olgfde] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-gyy2olgfde] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-gyy2olgfde] {
    display: flex;
    gap: 8px;
}

/* Statistics Cards */
.stats-row[b-gyy2olgfde] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-card[b-gyy2olgfde] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.stat-card:hover[b-gyy2olgfde] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.stat-icon[b-gyy2olgfde] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.bg-primary[b-gyy2olgfde] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.bg-success[b-gyy2olgfde] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-icon.bg-info[b-gyy2olgfde] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.bg-warning[b-gyy2olgfde] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-content[b-gyy2olgfde] {
    flex-grow: 1;
}

.stat-value[b-gyy2olgfde] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.stat-label[b-gyy2olgfde] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Filter Bar */
.filter-bar .card-body[b-gyy2olgfde] {
    padding: 20px;
}

/* Policies List */
.policies-list[b-gyy2olgfde] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.policy-card[b-gyy2olgfde] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
}

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

.policy-card.inactive[b-gyy2olgfde] {
    opacity: 0.7;
    border-left-color: #6c757d;
}

.policy-header[b-gyy2olgfde] {
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.policy-title-section[b-gyy2olgfde] {
    flex-grow: 1;
}

.policy-name[b-gyy2olgfde] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

.policy-badges[b-gyy2olgfde] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.policy-badges .badge[b-gyy2olgfde] {
    font-size: 0.75rem;
    padding: 4px 10px;
}

.policy-status .badge[b-gyy2olgfde] {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.policy-body[b-gyy2olgfde] {
    padding: 20px;
}

.policy-description[b-gyy2olgfde] {
    color: #495057;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.policy-details[b-gyy2olgfde] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row[b-gyy2olgfde] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.detail-label[b-gyy2olgfde] {
    font-size: 0.9rem;
    color: #6c757d;
    display: flex;
    align-items: center;
}

.detail-value[b-gyy2olgfde] {
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

.policy-footer[b-gyy2olgfde] {
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.policy-meta[b-gyy2olgfde] {
    font-size: 0.85rem;
}

.policy-actions[b-gyy2olgfde] {
    display: flex;
    gap: 8px;
}

.policy-actions .btn[b-gyy2olgfde] {
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Empty State */
.empty-state[b-gyy2olgfde] {
    grid-column: 1 / -1;
}

.empty-state i[b-gyy2olgfde] {
    color: #dee2e6;
}

.empty-state h5[b-gyy2olgfde] {
    color: #6c757d;
    margin-bottom: 8px;
}

/* Modal */
.modal.show[b-gyy2olgfde] {
    display: block;
}

.modal-backdrop.show[b-gyy2olgfde] {
    opacity: 0.5;
}

.modal-header[b-gyy2olgfde] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.modal-title[b-gyy2olgfde] {
    color: #2c3e50;
    font-weight: 600;
}

.modal-body[b-gyy2olgfde] {
    padding: 24px;
}

.modal-footer[b-gyy2olgfde] {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
    padding: 16px 24px;
}

/* Form Elements */
.form-label[b-gyy2olgfde] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-gyy2olgfde],
.form-select[b-gyy2olgfde] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-gyy2olgfde],
.form-select:focus[b-gyy2olgfde] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

.form-check-input:checked[b-gyy2olgfde] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Buttons */
.btn[b-gyy2olgfde] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-gyy2olgfde] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover:not(:disabled)[b-gyy2olgfde] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.btn-outline-success:hover[b-gyy2olgfde] {
    transform: translateY(-1px);
}

/* Alerts */
.alert[b-gyy2olgfde] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-gyy2olgfde] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-gyy2olgfde] {
    background-color: #f8d7da;
    color: #842029;
}

/* Loading State */
.spinner-border[b-gyy2olgfde] {
    width: 3rem;
    height: 3rem;
}

/* Badge Styles */
.badge[b-gyy2olgfde] {
    font-weight: 500;
}

/* Card Styles */
.card[b-gyy2olgfde] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-row[b-gyy2olgfde] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .retention-policies-page[b-gyy2olgfde] {
        padding: 16px;
    }

    .header-actions[b-gyy2olgfde] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-gyy2olgfde] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-header[b-gyy2olgfde] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .stats-row[b-gyy2olgfde] {
        grid-template-columns: 1fr;
    }

    .policy-header[b-gyy2olgfde] {
        flex-direction: column;
        gap: 12px;
    }

    .policy-footer[b-gyy2olgfde] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .policy-actions[b-gyy2olgfde] {
        width: 100%;
        justify-content: space-between;
    }

    .detail-row[b-gyy2olgfde] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .detail-value[b-gyy2olgfde] {
        text-align: left;
    }

    .modal-dialog[b-gyy2olgfde] {
        margin: 8px;
    }

    .filter-bar .col-md-4[b-gyy2olgfde],
    .filter-bar .col-md-3[b-gyy2olgfde],
    .filter-bar .col-md-2[b-gyy2olgfde] {
        margin-bottom: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-gyy2olgfde {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.policy-card[b-gyy2olgfde] {
    animation: fadeIn-b-gyy2olgfde 0.3s ease;
}

/* Additional Spacing */
.mb-3[b-gyy2olgfde] {
    margin-bottom: 1rem;
}

.mt-3[b-gyy2olgfde] {
    margin-top: 1rem;
}

.py-5[b-gyy2olgfde] {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/* /Components/Pages/Documents/BulkDocumentOperations.razor.rz.scp.css */
.bulk-operations-page[b-2caef5z4vv] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-2caef5z4vv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h2[b-2caef5z4vv] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Operation Selector */
.operation-selector .card-header[b-2caef5z4vv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.operation-card[b-2caef5z4vv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: left;
}

.operation-card:hover[b-2caef5z4vv] {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.operation-card.active[b-2caef5z4vv] {
    border-color: #667eea;
    background: #f0f3ff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.operation-icon[b-2caef5z4vv] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
}

.operation-icon.bg-primary[b-2caef5z4vv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.operation-icon.bg-success[b-2caef5z4vv] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.operation-icon.bg-warning[b-2caef5z4vv] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.operation-icon.bg-danger[b-2caef5z4vv] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.operation-content h5[b-2caef5z4vv] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 4px;
}

.operation-content p[b-2caef5z4vv] {
    color: #6c757d;
    margin: 0;
    font-size: 0.9rem;
}

/* Operation Panel */
.operation-panel[b-2caef5z4vv] {
    animation: fadeIn-b-2caef5z4vv 0.3s ease;
}

.operation-panel .card-header[b-2caef5z4vv] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 16px 20px;
}

.operation-panel .card-header h5[b-2caef5z4vv] {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
}

.operation-panel.border-danger .card-header[b-2caef5z4vv] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

/* File List */
.file-list[b-2caef5z4vv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.file-item[b-2caef5z4vv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.file-item:hover[b-2caef5z4vv] {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.file-info[b-2caef5z4vv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.file-name[b-2caef5z4vv] {
    font-weight: 500;
    color: #2c3e50;
}

.file-size[b-2caef5z4vv] {
    font-size: 0.85rem;
}

/* Document Selection List */
.document-selection-list[b-2caef5z4vv] {
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.document-item[b-2caef5z4vv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.document-item:hover[b-2caef5z4vv] {
    border-color: #667eea;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.document-info[b-2caef5z4vv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.document-name[b-2caef5z4vv] {
    font-weight: 500;
    color: #2c3e50;
}

/* Progress Panel */
.progress-panel[b-2caef5z4vv] {
    animation: slideIn-b-2caef5z4vv 0.3s ease;
}

.progress-panel .card-header[b-2caef5z4vv] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.progress[b-2caef5z4vv] {
    height: 30px;
    border-radius: 8px;
    background-color: #e9ecef;
}

.progress-bar[b-2caef5z4vv] {
    font-weight: 600;
    font-size: 0.95rem;
}

.operation-log[b-2caef5z4vv] {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.log-entry[b-2caef5z4vv] {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    animation: fadeInUp-b-2caef5z4vv 0.3s ease;
}

.log-entry.success[b-2caef5z4vv] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.log-entry.error[b-2caef5z4vv] {
    background-color: #f8d7da;
    color: #842029;
}

/* Results Panel */
.results-panel[b-2caef5z4vv] {
    animation: bounceIn-b-2caef5z4vv 0.5s ease;
}

.result-stat[b-2caef5z4vv] {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.stat-value[b-2caef5z4vv] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-2caef5z4vv] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 8px;
}

/* Form Elements */
.form-label[b-2caef5z4vv] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-2caef5z4vv],
.form-select[b-2caef5z4vv] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-2caef5z4vv],
.form-select:focus[b-2caef5z4vv] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

.form-check-input[b-2caef5z4vv] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
    cursor: pointer;
}

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

/* Buttons */
.btn[b-2caef5z4vv] {
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 10px 20px;
}

.btn-lg[b-2caef5z4vv] {
    padding: 14px 28px;
    font-size: 1.1rem;
}

.btn-primary[b-2caef5z4vv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover:not(:disabled)[b-2caef5z4vv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-success[b-2caef5z4vv] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover:not(:disabled)[b-2caef5z4vv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(17, 153, 142, 0.4);
}

.btn-warning[b-2caef5z4vv] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-2caef5z4vv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 147, 251, 0.4);
}

.btn-danger[b-2caef5z4vv] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    border: none;
}

.btn-danger:hover:not(:disabled)[b-2caef5z4vv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
}

.btn:disabled[b-2caef5z4vv] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.alert[b-2caef5z4vv] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-2caef5z4vv] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-2caef5z4vv] {
    background-color: #f8d7da;
    color: #842029;
}

.alert-warning[b-2caef5z4vv] {
    background-color: #fff3cd;
    color: #664d03;
}

.alert-info[b-2caef5z4vv] {
    background-color: #cfe2ff;
    color: #084298;
}

/* Badge Styles */
.badge[b-2caef5z4vv] {
    font-weight: 500;
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* Card Styles */
.card[b-2caef5z4vv] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-body[b-2caef5z4vv] {
    padding: 24px;
}

/* Animations */
@keyframes fadeIn-b-2caef5z4vv {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-b-2caef5z4vv {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn-b-2caef5z4vv {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn-b-2caef5z4vv {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .bulk-operations-page[b-2caef5z4vv] {
        padding: 16px;
    }

    .page-header[b-2caef5z4vv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .operation-card[b-2caef5z4vv] {
        flex-direction: column;
        text-align: center;
    }

    .operation-icon[b-2caef5z4vv] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .page-header h2[b-2caef5z4vv] {
        font-size: 1.5rem;
    }

    .stat-value[b-2caef5z4vv] {
        font-size: 2rem;
    }

    .btn-lg[b-2caef5z4vv] {
        padding: 12px 20px;
        font-size: 1rem;
    }

    .file-item[b-2caef5z4vv],
    .document-item[b-2caef5z4vv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .file-info[b-2caef5z4vv],
    .document-info[b-2caef5z4vv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .file-list[b-2caef5z4vv],
    .document-selection-list[b-2caef5z4vv] {
        max-height: 300px;
    }
}

/* Loading State */
.spinner-border[b-2caef5z4vv] {
    width: 1rem;
    height: 1rem;
}

/* Scrollbar Styling */
.file-list[b-2caef5z4vv]::-webkit-scrollbar,
.document-selection-list[b-2caef5z4vv]::-webkit-scrollbar,
.operation-log[b-2caef5z4vv]::-webkit-scrollbar {
    width: 8px;
}

.file-list[b-2caef5z4vv]::-webkit-scrollbar-track,
.document-selection-list[b-2caef5z4vv]::-webkit-scrollbar-track,
.operation-log[b-2caef5z4vv]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.file-list[b-2caef5z4vv]::-webkit-scrollbar-thumb,
.document-selection-list[b-2caef5z4vv]::-webkit-scrollbar-thumb,
.operation-log[b-2caef5z4vv]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.file-list[b-2caef5z4vv]::-webkit-scrollbar-thumb:hover,
.document-selection-list[b-2caef5z4vv]::-webkit-scrollbar-thumb:hover,
.operation-log[b-2caef5z4vv]::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* /Components/Pages/Documents/DocumentTemplates.razor.rz.scp.css */
.document-templates-page[b-kisdgwx63r] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-kisdgwx63r] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-kisdgwx63r] {
    display: flex;
    gap: 8px;
}

/* Statistics Cards */
.stats-row[b-kisdgwx63r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-card[b-kisdgwx63r] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.stat-card:hover[b-kisdgwx63r] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.stat-icon[b-kisdgwx63r] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.stat-icon.bg-primary[b-kisdgwx63r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.bg-success[b-kisdgwx63r] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-icon.bg-info[b-kisdgwx63r] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.bg-warning[b-kisdgwx63r] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-content[b-kisdgwx63r] {
    flex-grow: 1;
}

.stat-value[b-kisdgwx63r] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.stat-label[b-kisdgwx63r] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Filter Bar */
.filter-bar .card-body[b-kisdgwx63r] {
    padding: 20px;
}

/* Templates Grid */
.templates-grid[b-kisdgwx63r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.template-card[b-kisdgwx63r] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
}

.template-card:hover[b-kisdgwx63r] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.template-card.inactive[b-kisdgwx63r] {
    opacity: 0.7;
    border-left-color: #6c757d;
}

.template-header[b-kisdgwx63r] {
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.template-title h5[b-kisdgwx63r] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

.template-badges[b-kisdgwx63r] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.template-badges .badge[b-kisdgwx63r] {
    font-size: 0.75rem;
    padding: 4px 8px;
}

.template-status .badge[b-kisdgwx63r] {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.template-body[b-kisdgwx63r] {
    padding: 20px;
}

.template-description[b-kisdgwx63r] {
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.template-stats[b-kisdgwx63r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item[b-kisdgwx63r] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.stat-item i[b-kisdgwx63r] {
    width: 24px;
}

.template-meta[b-kisdgwx63r] {
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.template-footer[b-kisdgwx63r] {
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-created[b-kisdgwx63r] {
    font-size: 0.85rem;
}

.template-actions[b-kisdgwx63r] {
    display: flex;
    gap: 8px;
}

.template-actions .btn[b-kisdgwx63r] {
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Empty State */
.empty-state[b-kisdgwx63r] {
    grid-column: 1 / -1;
}

.empty-state i[b-kisdgwx63r] {
    color: #dee2e6;
}

.empty-state h5[b-kisdgwx63r] {
    color: #6c757d;
    margin-bottom: 8px;
}

/* Modal */
.modal.show[b-kisdgwx63r] {
    display: block;
}

.modal-backdrop.show[b-kisdgwx63r] {
    opacity: 0.5;
}

.modal-header[b-kisdgwx63r] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.modal-title[b-kisdgwx63r] {
    color: #2c3e50;
    font-weight: 600;
}

.modal-body[b-kisdgwx63r] {
    padding: 24px;
}

.modal-footer[b-kisdgwx63r] {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
    padding: 16px 24px;
}

/* Form Elements */
.form-label[b-kisdgwx63r] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-kisdgwx63r],
.form-select[b-kisdgwx63r] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-kisdgwx63r],
.form-select:focus[b-kisdgwx63r] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

.template-editor[b-kisdgwx63r] {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.form-check-input:checked[b-kisdgwx63r] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Buttons */
.btn[b-kisdgwx63r] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-kisdgwx63r] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-kisdgwx63r] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:hover[b-kisdgwx63r],
.btn-outline-secondary:hover[b-kisdgwx63r],
.btn-outline-info:hover[b-kisdgwx63r],
.btn-outline-success:hover[b-kisdgwx63r],
.btn-outline-danger:hover[b-kisdgwx63r] {
    transform: translateY(-1px);
}

/* Alerts */
.alert[b-kisdgwx63r] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-kisdgwx63r] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-kisdgwx63r] {
    background-color: #f8d7da;
    color: #842029;
}

/* Loading State */
.spinner-border[b-kisdgwx63r] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .templates-grid[b-kisdgwx63r] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 992px) {
    .document-templates-page[b-kisdgwx63r] {
        padding: 16px;
    }

    .header-actions[b-kisdgwx63r] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-kisdgwx63r] {
        width: 100%;
    }

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

    .templates-grid[b-kisdgwx63r] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-kisdgwx63r] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .stats-row[b-kisdgwx63r] {
        grid-template-columns: 1fr;
    }

    .template-footer[b-kisdgwx63r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .template-actions[b-kisdgwx63r] {
        width: 100%;
        justify-content: space-between;
    }

    .modal-dialog[b-kisdgwx63r] {
        margin: 8px;
    }

    .filter-bar .col-md-4[b-kisdgwx63r],
    .filter-bar .col-md-3[b-kisdgwx63r],
    .filter-bar .col-md-2[b-kisdgwx63r] {
        margin-bottom: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-kisdgwx63r {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.template-card[b-kisdgwx63r] {
    animation: fadeIn-b-kisdgwx63r 0.3s ease;
}

/* Badge Styles */
.badge[b-kisdgwx63r] {
    font-weight: 500;
}

/* Card Styles */
.card[b-kisdgwx63r] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s ease;
}
/* /Components/Pages/Expenses/NewExpense.razor.rz.scp.css */
/* Expense Pages Styles */

.expense-form-page[b-ib60kxuo6u],
.expenses-page[b-ib60kxuo6u] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

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

.page-header h1[b-ib60kxuo6u] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

.page-header h1 i[b-ib60kxuo6u] {
    margin-right: 0.75rem;
    color: #3498db;
}

.page-header p[b-ib60kxuo6u] {
    margin: 0.5rem 0 0 0;
}

.page-header-actions[b-ib60kxuo6u] {
    display: flex;
    gap: 0.75rem;
}

/* Expense Form */
.expense-form-container[b-ib60kxuo6u] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-label[b-ib60kxuo6u] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.form-control[b-ib60kxuo6u],
.form-select[b-ib60kxuo6u] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.75rem;
}

.form-control:focus[b-ib60kxuo6u],
.form-select:focus[b-ib60kxuo6u] {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* Statistics Cards */
.stat-card[b-ib60kxuo6u] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

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

.stat-card-blue[b-ib60kxuo6u] {
    border-left-color: #3498db;
}

.stat-card-yellow[b-ib60kxuo6u] {
    border-left-color: #f39c12;
}

.stat-card-green[b-ib60kxuo6u] {
    border-left-color: #2ecc71;
}

.stat-card-purple[b-ib60kxuo6u] {
    border-left-color: #9b59b6;
}

.stat-icon[b-ib60kxuo6u] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.stat-card-blue .stat-icon[b-ib60kxuo6u] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-card-yellow .stat-icon[b-ib60kxuo6u] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-card-green .stat-icon[b-ib60kxuo6u] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.stat-card-purple .stat-icon[b-ib60kxuo6u] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.stat-info h3[b-ib60kxuo6u] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

.stat-info p[b-ib60kxuo6u] {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filters Bar */
.filters-bar[b-ib60kxuo6u] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Table Styles */
.table[b-ib60kxuo6u] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.table thead[b-ib60kxuo6u] {
    background: #f8f9fa;
}

.table thead th[b-ib60kxuo6u] {
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #dee2e6;
    padding: 1rem;
}

.table tbody tr[b-ib60kxuo6u] {
    cursor: pointer;
    transition: background-color 0.2s;
}

.table tbody tr:hover[b-ib60kxuo6u] {
    background: #f8f9fa;
}

.table tbody td[b-ib60kxuo6u] {
    padding: 1rem;
    vertical-align: middle;
}

/* Empty State */
.empty-state[b-ib60kxuo6u] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state i[b-ib60kxuo6u] {
    opacity: 0.3;
}

.empty-state p[b-ib60kxuo6u] {
    color: #7f8c8d;
    margin-top: 1rem;
    font-size: 1.1rem;
}

/* Badges */
.badge[b-ib60kxuo6u] {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .expense-form-page[b-ib60kxuo6u],
    .expenses-page[b-ib60kxuo6u] {
        padding: 1rem;
    }

    .page-header[b-ib60kxuo6u] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-header-actions[b-ib60kxuo6u] {
        width: 100%;
    }

    .page-header-actions button[b-ib60kxuo6u] {
        flex: 1;
    }

    .stat-card[b-ib60kxuo6u] {
        margin-bottom: 1rem;
    }

    .expense-form-container[b-ib60kxuo6u] {
        padding: 1rem;
    }
}
/* /Components/Pages/Goals/GoalTracker.razor.rz.scp.css */
.goal-tracker-page[b-89rtiavkz8] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header */
.page-header h2[b-89rtiavkz8] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-89rtiavkz8] {
    display: flex;
    gap: 8px;
}

/* Loading */
.loading-state[b-89rtiavkz8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Stats Row */
.stats-row[b-89rtiavkz8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat-card[b-89rtiavkz8] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.stat-card:hover[b-89rtiavkz8] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.stat-icon[b-89rtiavkz8] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon.bg-primary[b-89rtiavkz8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.bg-success[b-89rtiavkz8] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-icon.bg-warning[b-89rtiavkz8] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.bg-info[b-89rtiavkz8] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-label[b-89rtiavkz8] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-89rtiavkz8] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Overall Progress Card */
.overall-progress[b-89rtiavkz8] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.progress-header[b-89rtiavkz8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-percent[b-89rtiavkz8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
}

.progress-bar-container[b-89rtiavkz8] {
    height: 16px;
    background: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.progress-bar-container.small[b-89rtiavkz8] {
    height: 8px;
}

.progress-bar-fill[b-89rtiavkz8] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.progress-bar-fill.on-track[b-89rtiavkz8] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.progress-bar-fill.at-risk[b-89rtiavkz8] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.progress-bar-fill.in-progress[b-89rtiavkz8] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.progress-bar-fill.completed[b-89rtiavkz8] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.progress-breakdown[b-89rtiavkz8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.breakdown-item[b-89rtiavkz8] {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.breakdown-label[b-89rtiavkz8] {
    color: #6c757d;
    font-size: 0.9rem;
}

.breakdown-value[b-89rtiavkz8] {
    font-weight: 700;
    color: #2c3e50;
    font-size: 1.2rem;
}

/* Filter Tabs */
.filter-tabs[b-89rtiavkz8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab[b-89rtiavkz8] {
    padding: 10px 20px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-tab:hover[b-89rtiavkz8] {
    border-color: #667eea;
    background: #f8f9fa;
}

.filter-tab.active[b-89rtiavkz8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

/* Goals Grid */
.goals-grid[b-89rtiavkz8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}

.goal-card[b-89rtiavkz8] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
}

.goal-card:hover[b-89rtiavkz8] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.goal-card.on-track[b-89rtiavkz8] {
    border-left-color: #38ef7d;
}

.goal-card.at-risk[b-89rtiavkz8] {
    border-left-color: #f5576c;
}

.goal-card.completed[b-89rtiavkz8] {
    border-left-color: #11998e;
    opacity: 0.9;
}

.goal-header[b-89rtiavkz8] {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
}

.goal-priority[b-89rtiavkz8] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.goal-priority.low[b-89rtiavkz8] {
    background: #d1e7dd;
    color: #0f5132;
}

.goal-priority.medium[b-89rtiavkz8] {
    background: #cfe2ff;
    color: #084298;
}

.goal-priority.high[b-89rtiavkz8] {
    background: #fff3cd;
    color: #664d03;
}

.goal-priority.critical[b-89rtiavkz8] {
    background: #f8d7da;
    color: #842029;
}

.goal-actions[b-89rtiavkz8] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-89rtiavkz8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-89rtiavkz8] {
    background: #667eea;
    color: white;
    transform: scale(1.1);
}

.goal-body[b-89rtiavkz8] {
    padding: 20px;
}

.goal-title[b-89rtiavkz8] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.goal-description[b-89rtiavkz8] {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.goal-progress .progress-label[b-89rtiavkz8] {
    font-size: 0.85rem;
    color: #495057;
}

.goal-metrics[b-89rtiavkz8],
.goal-timeline[b-89rtiavkz8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-item[b-89rtiavkz8],
.timeline-item[b-89rtiavkz8] {
    font-size: 0.9rem;
    color: #495057;
    display: flex;
    align-items: center;
}

.metric-item i[b-89rtiavkz8],
.timeline-item i[b-89rtiavkz8] {
    color: #667eea;
}

.overdue-badge[b-89rtiavkz8] {
    background: #f8d7da;
    color: #842029;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.due-soon-badge[b-89rtiavkz8] {
    background: #fff3cd;
    color: #664d03;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.goal-status-badge[b-89rtiavkz8] {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

.goal-status-badge.notstarted[b-89rtiavkz8] {
    background: #e9ecef;
    color: #495057;
}

.goal-status-badge.inprogress[b-89rtiavkz8] {
    background: #cfe2ff;
    color: #084298;
}

.goal-status-badge.atrisk[b-89rtiavkz8] {
    background: #f8d7da;
    color: #842029;
}

.goal-status-badge.completed[b-89rtiavkz8] {
    background: #d1e7dd;
    color: #0f5132;
}

.goal-status-badge.cancelled[b-89rtiavkz8] {
    background: #e9ecef;
    color: #495057;
}

.goal-footer[b-89rtiavkz8] {
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Empty State */
.empty-state[b-89rtiavkz8] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.empty-state i[b-89rtiavkz8] {
    color: #dee2e6;
}

/* Modal */
.modal-backdrop[b-89rtiavkz8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    animation: fadeIn-b-89rtiavkz8 0.2s ease;
}

.modal-dialog[b-89rtiavkz8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    animation: slideDown-b-89rtiavkz8 0.3s ease;
}

.modal-content[b-89rtiavkz8] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.modal-header[b-89rtiavkz8] {
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: between;
    align-items: center;
}

.modal-title[b-89rtiavkz8] {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
}

.btn-close[b-89rtiavkz8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f8f9fa;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close:hover[b-89rtiavkz8] {
    background: #e9ecef;
}

.modal-body[b-89rtiavkz8] {
    padding: 24px;
}

.modal-footer[b-89rtiavkz8] {
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Form Elements */
.form-label[b-89rtiavkz8] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-89rtiavkz8],
.form-select[b-89rtiavkz8] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-89rtiavkz8],
.form-select:focus[b-89rtiavkz8] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    outline: none;
}

/* Buttons */
.btn[b-89rtiavkz8] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-sm[b-89rtiavkz8] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-primary[b-89rtiavkz8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-89rtiavkz8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-success[b-89rtiavkz8] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-89rtiavkz8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(17, 153, 142, 0.4);
}

/* Animations */
@keyframes fadeIn-b-89rtiavkz8 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown-b-89rtiavkz8 {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .goal-tracker-page[b-89rtiavkz8] {
        padding: 16px;
    }

    .stats-row[b-89rtiavkz8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .progress-breakdown[b-89rtiavkz8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .goals-grid[b-89rtiavkz8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-89rtiavkz8] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-89rtiavkz8] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-89rtiavkz8] {
        width: 100%;
    }

    .stats-row[b-89rtiavkz8] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-89rtiavkz8] {
        padding: 16px;
    }

    .progress-breakdown[b-89rtiavkz8] {
        grid-template-columns: 1fr;
    }

    .filter-tabs[b-89rtiavkz8] {
        flex-direction: column;
    }

    .filter-tab[b-89rtiavkz8] {
        width: 100%;
    }

    .goal-footer[b-89rtiavkz8] {
        flex-direction: column;
    }

    .goal-footer .btn[b-89rtiavkz8] {
        width: 100%;
    }

    .modal-dialog[b-89rtiavkz8] {
        width: 95%;
    }
}
/* /Components/Pages/Goals/OKRDashboard.razor.rz.scp.css */
.okr-dashboard-page[b-0gs1o7jlg3] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header */
.page-header h2[b-0gs1o7jlg3] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-0gs1o7jlg3] {
    display: flex;
    gap: 8px;
}

/* Quarter Selector */
.quarter-selector[b-0gs1o7jlg3] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.quarter-buttons[b-0gs1o7jlg3] {
    display: flex;
    gap: 8px;
}

.quarter-progress[b-0gs1o7jlg3] {
    margin-top: 16px;
}

.progress-header[b-0gs1o7jlg3] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-percent[b-0gs1o7jlg3] {
    font-weight: 700;
    color: #667eea;
}

.progress-bar-container[b-0gs1o7jlg3] {
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-container.small[b-0gs1o7jlg3] {
    height: 6px;
}

.progress-bar-fill[b-0gs1o7jlg3] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.progress-bar-fill.on-track[b-0gs1o7jlg3] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.progress-bar-fill.at-risk[b-0gs1o7jlg3] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.progress-bar-fill.in-progress[b-0gs1o7jlg3] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.progress-bar-fill.completed[b-0gs1o7jlg3] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

/* OKR List */
.okr-list[b-0gs1o7jlg3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Objective Card */
.objective-card[b-0gs1o7jlg3] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.objective-card:hover[b-0gs1o7jlg3] {
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.objective-header[b-0gs1o7jlg3] {
    padding: 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.objective-title-section[b-0gs1o7jlg3] {
    flex-grow: 1;
}

.objective-title[b-0gs1o7jlg3] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.objective-description[b-0gs1o7jlg3] {
    color: #6c757d;
    margin: 0;
    font-size: 0.95rem;
}

/* Progress Circle */
.objective-progress-circle[b-0gs1o7jlg3] {
    position: relative;
    width: 80px;
    height: 80px;
}

.progress-ring[b-0gs1o7jlg3] {
    transform: rotate(-90deg);
}

.progress-ring-circle-bg[b-0gs1o7jlg3] {
    stroke: #e9ecef;
}

.progress-ring-circle[b-0gs1o7jlg3] {
    stroke: url(#gradient);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-ring-text[b-0gs1o7jlg3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: #667eea;
}

/* Key Results */
.key-results[b-0gs1o7jlg3] {
    padding: 24px;
}

.key-results-header[b-0gs1o7jlg3] {
    color: #495057;
    font-weight: 600;
    margin-bottom: 16px;
}

.key-results-list[b-0gs1o7jlg3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.key-result-item[b-0gs1o7jlg3] {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.key-result-item:hover[b-0gs1o7jlg3] {
    background: #e9ecef;
    transform: translateX(4px);
}

.key-result-item.on-track[b-0gs1o7jlg3] {
    border-left-color: #38ef7d;
}

.key-result-item.at-risk[b-0gs1o7jlg3] {
    border-left-color: #f5576c;
}

.key-result-item.completed[b-0gs1o7jlg3] {
    border-left-color: #11998e;
    opacity: 0.9;
}

.kr-content[b-0gs1o7jlg3] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kr-header[b-0gs1o7jlg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kr-title[b-0gs1o7jlg3] {
    font-weight: 600;
    color: #2c3e50;
}

.kr-status[b-0gs1o7jlg3] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kr-status.notstarted[b-0gs1o7jlg3] {
    background: #e9ecef;
    color: #495057;
}

.kr-status.inprogress[b-0gs1o7jlg3] {
    background: #cfe2ff;
    color: #084298;
}

.kr-status.atrisk[b-0gs1o7jlg3] {
    background: #f8d7da;
    color: #842029;
}

.kr-status.completed[b-0gs1o7jlg3] {
    background: #d1e7dd;
    color: #0f5132;
}

.kr-metric[b-0gs1o7jlg3] {
    color: #6c757d;
    font-size: 0.9rem;
}

.kr-values[b-0gs1o7jlg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.actual-value[b-0gs1o7jlg3] {
    color: #667eea;
    font-size: 1.1rem;
}

.value-separator[b-0gs1o7jlg3] {
    color: #adb5bd;
}

.target-value[b-0gs1o7jlg3] {
    color: #6c757d;
}

.kr-progress[b-0gs1o7jlg3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kr-progress .progress-bar-container[b-0gs1o7jlg3] {
    flex-grow: 1;
}

.progress-text[b-0gs1o7jlg3] {
    min-width: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

.kr-actions[b-0gs1o7jlg3] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-0gs1o7jlg3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-0gs1o7jlg3] {
    background: #667eea;
    color: white;
    transform: scale(1.1);
}

.no-key-results[b-0gs1o7jlg3] {
    text-align: center;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

/* Objective Footer */
.objective-footer[b-0gs1o7jlg3] {
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.objective-dates[b-0gs1o7jlg3] {
    color: #6c757d;
    font-size: 0.9rem;
}

.objective-actions[b-0gs1o7jlg3] {
    display: flex;
    gap: 8px;
}

/* Empty State */
.empty-state[b-0gs1o7jlg3] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.empty-state i[b-0gs1o7jlg3] {
    color: #dee2e6;
}

/* OKR Guide */
.okr-guide[b-0gs1o7jlg3] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.okr-guide .card-header[b-0gs1o7jlg3] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.okr-guide ul[b-0gs1o7jlg3] {
    margin: 0;
    padding-left: 20px;
}

.okr-guide li[b-0gs1o7jlg3] {
    margin-bottom: 8px;
    color: #495057;
}

/* Loading */
.loading-state[b-0gs1o7jlg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Buttons */
.btn[b-0gs1o7jlg3] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-sm[b-0gs1o7jlg3] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-primary[b-0gs1o7jlg3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-0gs1o7jlg3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-success[b-0gs1o7jlg3] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-0gs1o7jlg3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(17, 153, 142, 0.4);
}

/* Responsive */
@media (max-width: 992px) {
    .okr-dashboard-page[b-0gs1o7jlg3] {
        padding: 16px;
    }

    .objective-header[b-0gs1o7jlg3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .objective-progress-circle[b-0gs1o7jlg3] {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .page-header[b-0gs1o7jlg3] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-0gs1o7jlg3] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-0gs1o7jlg3] {
        width: 100%;
    }

    .quarter-selector .card-body[b-0gs1o7jlg3] {
        flex-direction: column;
        gap: 16px;
    }

    .quarter-buttons[b-0gs1o7jlg3] {
        width: 100%;
        justify-content: space-between;
    }

    .key-result-item[b-0gs1o7jlg3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .kr-header[b-0gs1o7jlg3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .objective-footer[b-0gs1o7jlg3] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .objective-actions[b-0gs1o7jlg3] {
        width: 100%;
        flex-direction: column;
    }

    .objective-actions .btn[b-0gs1o7jlg3] {
        width: 100%;
    }
}
/* /Components/Pages/HR/ExitInterviewForm.razor.rz.scp.css */
.exit-interview-form[b-8hw2lbirei] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.exit-interview-form .page-header[b-8hw2lbirei] {
    margin-bottom: 30px;
}

.exit-interview-form .page-header h2[b-8hw2lbirei] {
    color: #2c3e50;
    margin-bottom: 8px;
}

.exit-interview-form .card[b-8hw2lbirei] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.exit-interview-form .card-header[b-8hw2lbirei] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
}

.exit-interview-form .card-header h5[b-8hw2lbirei] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}

.exit-interview-form .card-body[b-8hw2lbirei] {
    padding: 24px;
}

/* Rating Input Styles */
.rating-input[b-8hw2lbirei] {
    display: flex;
    gap: 8px;
}

.btn-rating[b-8hw2lbirei] {
    width: 45px;
    height: 45px;
    border: 2px solid #dee2e6;
    background-color: white;
    color: #6c757d;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-rating:hover[b-8hw2lbirei] {
    border-color: #0d6efd;
    background-color: #e7f1ff;
    color: #0d6efd;
    transform: translateY(-2px);
}

.btn-rating.active[b-8hw2lbirei] {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

.btn-rating:focus[b-8hw2lbirei] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Form Inputs */
.exit-interview-form .form-control[b-8hw2lbirei],
.exit-interview-form .form-select[b-8hw2lbirei] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.exit-interview-form .form-control:focus[b-8hw2lbirei],
.exit-interview-form .form-select:focus[b-8hw2lbirei] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

.exit-interview-form textarea.form-control[b-8hw2lbirei] {
    resize: vertical;
    min-height: 80px;
}

/* Form Check */
.exit-interview-form .form-check[b-8hw2lbirei] {
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.exit-interview-form .form-check-input:checked[b-8hw2lbirei] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.exit-interview-form .form-check-label[b-8hw2lbirei] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
}

/* Form Labels */
.exit-interview-form .form-label[b-8hw2lbirei] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Buttons */
.exit-interview-form .btn[b-8hw2lbirei] {
    padding: 10px 24px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.exit-interview-form .btn-primary[b-8hw2lbirei] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.exit-interview-form .btn-primary:hover[b-8hw2lbirei] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.exit-interview-form .btn-outline-secondary[b-8hw2lbirei] {
    border-color: #6c757d;
    color: #6c757d;
}

.exit-interview-form .btn-outline-secondary:hover[b-8hw2lbirei] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.exit-interview-form .btn i[b-8hw2lbirei] {
    font-size: 0.9rem;
}

/* Loading State */
.exit-interview-form .spinner-border[b-8hw2lbirei] {
    width: 3rem;
    height: 3rem;
}

/* Validation */
.exit-interview-form .validation-message[b-8hw2lbirei] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .exit-interview-form[b-8hw2lbirei] {
        padding: 15px;
    }

    .exit-interview-form .card-body[b-8hw2lbirei] {
        padding: 16px;
    }

    .rating-input[b-8hw2lbirei] {
        flex-wrap: wrap;
    }

    .btn-rating[b-8hw2lbirei] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .exit-interview-form .btn[b-8hw2lbirei] {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}
/* /Components/Pages/HR/OffboardingDashboard.razor.rz.scp.css */
.offboarding-dashboard[b-96f50v5ysz] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-96f50v5ysz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.page-header h2[b-96f50v5ysz] {
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Stats Grid */
.stats-grid[b-96f50v5ysz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.stat-card[b-96f50v5ysz] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-96f50v5ysz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.stat-icon[b-96f50v5ysz] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
}

.stat-icon.bg-warning[b-96f50v5ysz] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.stat-icon.bg-danger[b-96f50v5ysz] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-icon.bg-info[b-96f50v5ysz] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stat-icon.bg-success[b-96f50v5ysz] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-details[b-96f50v5ysz] {
    flex: 1;
}

.stat-value[b-96f50v5ysz] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.stat-label[b-96f50v5ysz] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Tabs */
.nav-tabs[b-96f50v5ysz] {
    border-bottom: 2px solid #e5e7eb;
}

.nav-tabs .nav-link[b-96f50v5ysz] {
    border: none;
    color: #6b7280;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.nav-tabs .nav-link:hover[b-96f50v5ysz] {
    color: #667eea;
    background: transparent;
}

.nav-tabs .nav-link.active[b-96f50v5ysz] {
    color: #667eea;
    background: transparent;
    border-bottom-color: #667eea;
}

/* Termination List */
.termination-list[b-96f50v5ysz] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.termination-card[b-96f50v5ysz] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.termination-card:hover[b-96f50v5ysz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.termination-header[b-96f50v5ysz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.employee-info h5[b-96f50v5ysz] {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
    font-weight: 600;
}

.termination-date[b-96f50v5ysz] {
    text-align: right;
}

.termination-date small[b-96f50v5ysz] {
    display: block;
    margin-bottom: 0.25rem;
}

.termination-progress[b-96f50v5ysz] {
    margin-bottom: 1.5rem;
}

.progress-label[b-96f50v5ysz] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.progress[b-96f50v5ysz] {
    height: 8px;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.termination-actions[b-96f50v5ysz] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Analytics */
.analytics-grid[b-96f50v5ysz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.analytics-card[b-96f50v5ysz] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
}

.analytics-card h6[b-96f50v5ysz] {
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.analytics-value[b-96f50v5ysz] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.reason-bar[b-96f50v5ysz] {
    padding-bottom: 0.5rem;
}

/* Empty State */
.empty-state[b-96f50v5ysz] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state i[b-96f50v5ysz] {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h5[b-96f50v5ysz] {
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* Table */
.table-responsive[b-96f50v5ysz] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

.table th[b-96f50v5ysz] {
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e5e7eb;
}

.table tbody tr[b-96f50v5ysz] {
    transition: background-color 0.2s;
}

.table tbody tr:hover[b-96f50v5ysz] {
    background-color: #f9fafb;
}

/* Responsive */
@media (max-width: 768px) {
    .offboarding-dashboard[b-96f50v5ysz] {
        padding: 1rem;
    }

    .page-header[b-96f50v5ysz] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-header button[b-96f50v5ysz] {
        width: 100%;
    }

    .stats-grid[b-96f50v5ysz] {
        grid-template-columns: 1fr;
    }

    .termination-header[b-96f50v5ysz] {
        flex-direction: column;
        gap: 1rem;
    }

    .termination-date[b-96f50v5ysz] {
        text-align: left;
    }

    .analytics-grid[b-96f50v5ysz] {
        grid-template-columns: 1fr;
    }
}

/* Alumni Cards */
.alumni-card[b-96f50v5ysz] {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.alumni-card:hover[b-96f50v5ysz] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.alumni-avatar[b-96f50v5ysz] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alumni-info .info-row[b-96f50v5ysz] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.alumni-info .info-row i[b-96f50v5ysz] {
    width: 20px;
    flex-shrink: 0;
}

.rehire-status .badge[b-96f50v5ysz] {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

/* Exit Interview Cards */
.card .card-header h6[b-96f50v5ysz] {
    font-weight: 600;
    color: #2d3748;
}

.form-check-input:disabled[b-96f50v5ysz] {
    opacity: 0.5;
}
/* /Components/Pages/HR/TerminationDetails.razor.rz.scp.css */
.termination-details[b-5bmx7pp8nm] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-5bmx7pp8nm] {
    margin-bottom: 24px;
}

.header-content[b-5bmx7pp8nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.header-actions[b-5bmx7pp8nm] {
    display: flex;
    gap: 8px;
}

/* Progress Summary */
.progress-summary[b-5bmx7pp8nm] {
    display: flex;
    align-items: center;
    gap: 40px;
}

.progress-circle[b-5bmx7pp8nm] {
    flex-shrink: 0;
}

.progress-circle svg[b-5bmx7pp8nm] {
    transform: scaleX(-1); /* Flip horizontally for correct direction */
}

.progress-circle circle[b-5bmx7pp8nm] {
    transition: stroke-dashoffset 0.5s ease;
}

.progress-details[b-5bmx7pp8nm] {
    flex-grow: 1;
}

.progress-details h4[b-5bmx7pp8nm] {
    color: #2c3e50;
    margin-bottom: 12px;
}

.task-breakdown[b-5bmx7pp8nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.task-stat[b-5bmx7pp8nm] {
    display: flex;
    align-items: center;
}

.task-stat i[b-5bmx7pp8nm] {
    font-size: 1.2rem;
}

/* Cards */
.card[b-5bmx7pp8nm] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}

.card-header[b-5bmx7pp8nm] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
}

.card-header h5[b-5bmx7pp8nm] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}

.card-body[b-5bmx7pp8nm] {
    padding: 20px;
}

/* Detail Box */
.detail-box[b-5bmx7pp8nm] {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    font-size: 0.95rem;
    color: #495057;
}

/* Exit Interview Summary */
.exit-interview-summary[b-5bmx7pp8nm] {
    background-color: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

/* Task Filters */
.task-filters[b-5bmx7pp8nm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

/* Task List */
.task-list[b-5bmx7pp8nm] {
    margin-top: 16px;
}

.task-item[b-5bmx7pp8nm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: white;
    transition: all 0.2s ease;
}

.task-item:hover[b-5bmx7pp8nm] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.task-item.overdue[b-5bmx7pp8nm] {
    border-left: 4px solid #dc3545;
    background-color: #fff5f5;
}

.task-checkbox[b-5bmx7pp8nm] {
    flex-shrink: 0;
    padding-top: 4px;
}

.task-checkbox .form-check-input[b-5bmx7pp8nm] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.task-content[b-5bmx7pp8nm] {
    flex-grow: 1;
}

.task-meta[b-5bmx7pp8nm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.task-meta .badge[b-5bmx7pp8nm] {
    font-size: 0.75rem;
    padding: 4px 8px;
}

.task-actions[b-5bmx7pp8nm] {
    display: flex;
    gap: 4px;
}

.task-actions .btn-link[b-5bmx7pp8nm] {
    padding: 4px 8px;
    color: #6c757d;
}

.task-actions .btn-link:hover[b-5bmx7pp8nm] {
    color: #0d6efd;
}

.task-actions .text-danger:hover[b-5bmx7pp8nm] {
    color: #dc3545 !important;
}

.completion-info[b-5bmx7pp8nm] {
    padding: 8px 12px;
    background-color: #d1e7dd;
    border-radius: 6px;
    border: 1px solid #badbcc;
}

/* Timeline */
.timeline[b-5bmx7pp8nm] {
    position: relative;
    padding-left: 30px;
}

.timeline[b-5bmx7pp8nm]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-color: #dee2e6;
}

.timeline-item[b-5bmx7pp8nm] {
    position: relative;
    margin-bottom: 24px;
}

.timeline-item:last-child[b-5bmx7pp8nm] {
    margin-bottom: 0;
}

.timeline-marker[b-5bmx7pp8nm] {
    position: absolute;
    left: -26px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #dee2e6;
    z-index: 1;
}

.timeline-content[b-5bmx7pp8nm] {
    padding-left: 8px;
}

.timeline-content .fw-bold[b-5bmx7pp8nm] {
    color: #2c3e50;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 992px) {
    .progress-summary[b-5bmx7pp8nm] {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .task-breakdown[b-5bmx7pp8nm] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .termination-details[b-5bmx7pp8nm] {
        padding: 15px;
    }

    .header-content[b-5bmx7pp8nm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-actions[b-5bmx7pp8nm] {
        width: 100%;
        justify-content: flex-start;
    }

    .task-filters[b-5bmx7pp8nm] {
        flex-direction: column;
    }

    .task-filters .btn[b-5bmx7pp8nm] {
        width: 100%;
    }

    .task-item[b-5bmx7pp8nm] {
        flex-direction: column;
    }

    .task-actions[b-5bmx7pp8nm] {
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* Form Elements */
.form-check-input:checked[b-5bmx7pp8nm] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-label[b-5bmx7pp8nm] {
    cursor: pointer;
}

/* Badges */
.badge[b-5bmx7pp8nm] {
    font-weight: 500;
    padding: 0.5em 0.75em;
}

/* Buttons */
.btn[b-5bmx7pp8nm] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-5bmx7pp8nm] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-5bmx7pp8nm] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:hover[b-5bmx7pp8nm] {
    transform: translateY(-1px);
}
/* /Components/Pages/Manager/CalibrationSession.razor.rz.scp.css */
.calibration-page[b-asn79i5ynb] {
    padding: 24px;
    max-width: 1800px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header */
.page-header h2[b-asn79i5ynb] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-asn79i5ynb] {
    display: flex;
    gap: 8px;
}

/* Loading */
.loading-state[b-asn79i5ynb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Cycle Selector */
.cycle-selector[b-asn79i5ynb] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.cycle-stats[b-asn79i5ynb] {
    display: flex;
    gap: 32px;
    justify-content: flex-end;
}

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

.stat-label[b-asn79i5ynb] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.stat-value[b-asn79i5ynb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Distribution Card */
.distribution-card[b-asn79i5ynb] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.distribution-card .card-header[b-asn79i5ynb] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.distribution-chart[b-asn79i5ynb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.distribution-row[b-asn79i5ynb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.distribution-row.out-of-range[b-asn79i5ynb] {
    background: #fff3cd;
    border: 2px solid #ffc107;
}

.rating-label[b-asn79i5ynb] {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-stars[b-asn79i5ynb] {
    display: flex;
    gap: 4px;
}

.rating-stars .fa-star[b-asn79i5ynb] {
    font-size: 0.9rem;
}

.rating-stars .fa-star.filled[b-asn79i5ynb] {
    color: #ffd700;
}

.rating-stars .fa-star.empty[b-asn79i5ynb] {
    color: #dee2e6;
}

.rating-text[b-asn79i5ynb] {
    font-weight: 600;
    color: #2c3e50;
}

.distribution-bar-container[b-asn79i5ynb] {
    flex-grow: 1;
    height: 40px;
    background: #e9ecef;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.distribution-bar[b-asn79i5ynb] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: width 0.5s ease;
}

.distribution-bar.excellent[b-asn79i5ynb] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.distribution-bar.good[b-asn79i5ynb] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.distribution-bar.satisfactory[b-asn79i5ynb] {
    background: linear-gradient(90deg, #fbc2eb 0%, #a6c1ee 100%);
}

.distribution-bar.needs-improvement[b-asn79i5ynb] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.distribution-bar.unsatisfactory[b-asn79i5ynb] {
    background: linear-gradient(90deg, #ff6b6b 0%, #ee5a6f 100%);
}

.distribution-count[b-asn79i5ynb] {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

.recommended-range[b-asn79i5ynb] {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(102, 126, 234, 0.1);
    border-left: 2px solid #667eea;
    border-right: 2px solid #667eea;
    pointer-events: none;
}

.range-label[b-asn79i5ynb] {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: #667eea;
    font-weight: 600;
    white-space: nowrap;
}

.distribution-percentage[b-asn79i5ynb] {
    min-width: 60px;
    text-align: right;
    font-weight: 700;
    color: #2c3e50;
    font-size: 1.1rem;
}

.distribution-note[b-asn79i5ynb] {
    padding: 12px;
    background: #e7f3ff;
    border-radius: 6px;
    color: #004085;
}

/* 9-Box Grid */
.nine-box-card[b-asn79i5ynb] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.nine-box-card .card-header[b-asn79i5ynb] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.nine-box-grid[b-asn79i5ynb] {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 1fr auto;
    gap: 16px;
}

.y-axis-label[b-asn79i5ynb] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    padding-right: 12px;
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
}

.grid-container[b-asn79i5ynb] {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 140px);
    gap: 12px;
}

.grid-cell[b-asn79i5ynb] {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.grid-cell:hover[b-asn79i5ynb] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 9-Box Cell Colors */
.grid-cell.high-high[b-asn79i5ynb] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-color: #11998e;
}

.grid-cell.high-medium[b-asn79i5ynb] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-color: #4facfe;
}

.grid-cell.high-low[b-asn79i5ynb] {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    border-color: #fbc2eb;
}

.grid-cell.medium-high[b-asn79i5ynb] {
    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
    border-color: #a8e6cf;
}

.grid-cell.medium-medium[b-asn79i5ynb] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #adb5bd;
}

.grid-cell.medium-low[b-asn79i5ynb] {
    background: linear-gradient(135deg, #ffd3b6 0%, #ffaaa5 100%);
    border-color: #ffd3b6;
}

.grid-cell.low-high[b-asn79i5ynb] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border-color: #ffc107;
}

.grid-cell.low-medium[b-asn79i5ynb] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-color: #f093fb;
}

.grid-cell.low-low[b-asn79i5ynb] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    border-color: #dc3545;
}

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

.cell-label[b-asn79i5ynb] {
    font-weight: 700;
    color: #2c3e50;
    font-size: 0.9rem;
}

.cell-count[b-asn79i5ynb] {
    background: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #2c3e50;
    font-size: 0.9rem;
}

.cell-employees[b-asn79i5ynb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.employee-bubble[b-asn79i5ynb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.employee-bubble.more[b-asn79i5ynb] {
    background: #667eea;
    color: white;
}

.x-axis-label[b-asn79i5ynb] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
}

/* Review List */
.review-list-card[b-asn79i5ynb] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.review-list-card .card-header[b-asn79i5ynb] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.filter-buttons[b-asn79i5ynb] {
    display: flex;
    gap: 8px;
}

.calibration-table[b-asn79i5ynb] {
    background: white;
}

.calibration-table thead[b-asn79i5ynb] {
    background: #f8f9fa;
}

.calibration-table th[b-asn79i5ynb] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.calibration-table tr.calibrated[b-asn79i5ynb] {
    background-color: #e7f3ff;
}

.employee-cell[b-asn79i5ynb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-avatar-small[b-asn79i5ynb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.rating-display[b-asn79i5ynb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rating-value[b-asn79i5ynb] {
    font-size: 1.2rem;
    font-weight: 700;
}

.rating-value.excellent[b-asn79i5ynb] { color: #38ef7d; }
.rating-value.good[b-asn79i5ynb] { color: #4facfe; }
.rating-value.satisfactory[b-asn79i5ynb] { color: #f093fb; }
.rating-value.needs-improvement[b-asn79i5ynb] { color: #f5576c; }
.rating-value.unsatisfactory[b-asn79i5ynb] { color: #dc3545; }

.rating-stars-small[b-asn79i5ynb] {
    display: flex;
    gap: 2px;
}

.rating-stars-small .fa-star[b-asn79i5ynb] {
    font-size: 0.7rem;
}

.rating-stars-small .fa-star.filled[b-asn79i5ynb] {
    color: #ffd700;
}

.rating-stars-small .fa-star.empty[b-asn79i5ynb] {
    color: #dee2e6;
}

.adjustment-badge[b-asn79i5ynb] {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
}

.adjustment-badge.increase[b-asn79i5ynb] {
    background: #d1e7dd;
    color: #0f5132;
}

.adjustment-badge.decrease[b-asn79i5ynb] {
    background: #f8d7da;
    color: #842029;
}

.adjustment-badge.none[b-asn79i5ynb] {
    background: #e9ecef;
    color: #495057;
}

.status-badge[b-asn79i5ynb] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.calibrated[b-asn79i5ynb] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-badge.pending[b-asn79i5ynb] {
    background: #fff3cd;
    color: #664d03;
}

/* Modal */
.modal-backdrop[b-asn79i5ynb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    animation: fadeIn-b-asn79i5ynb 0.2s ease;
}

.modal-dialog[b-asn79i5ynb] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    animation: slideDown-b-asn79i5ynb 0.3s ease;
}

.modal-content[b-asn79i5ynb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.modal-header[b-asn79i5ynb] {
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-asn79i5ynb] {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
}

.btn-close[b-asn79i5ynb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
}

.modal-body[b-asn79i5ynb] {
    padding: 24px;
}

.modal-footer[b-asn79i5ynb] {
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Calibration Form */
.rating-section[b-asn79i5ynb],
.adjustment-section[b-asn79i5ynb],
.notes-section[b-asn79i5ynb],
.comments-section[b-asn79i5ynb] {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.section-label[b-asn79i5ynb] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
    display: block;
}

.rating-display-large[b-asn79i5ynb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: white;
    border-radius: 8px;
}

.rating-display-large .rating-value[b-asn79i5ynb] {
    font-size: 2.5rem;
    font-weight: 700;
}

.rating-display-large .rating-stars[b-asn79i5ynb] {
    display: flex;
    gap: 6px;
}

.rating-display-large .rating-stars .fa-star[b-asn79i5ynb] {
    font-size: 1.5rem;
}

.rating-slider[b-asn79i5ynb] {
    padding: 12px;
    background: white;
    border-radius: 8px;
}

.form-range[b-asn79i5ynb] {
    width: 100%;
    height: 8px;
}

.slider-labels[b-asn79i5ynb] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-weight: 600;
    color: #6c757d;
}

.adjustment-display[b-asn79i5ynb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 700;
}

.adjustment-display.increase[b-asn79i5ynb] {
    color: #0f5132;
}

.adjustment-display.decrease[b-asn79i5ynb] {
    color: #842029;
}

.adjustment-display.none[b-asn79i5ynb] {
    color: #495057;
}

.comments-display[b-asn79i5ynb] {
    padding: 16px;
    background: white;
    border-radius: 8px;
    color: #495057;
    line-height: 1.6;
}

/* Animations */
@keyframes fadeIn-b-asn79i5ynb {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown-b-asn79i5ynb {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .grid-container[b-asn79i5ynb] {
        grid-template-rows: repeat(3, 120px);
    }
}

@media (max-width: 992px) {
    .calibration-page[b-asn79i5ynb] {
        padding: 16px;
    }

    .cycle-stats[b-asn79i5ynb] {
        flex-direction: column;
        gap: 12px;
    }

    .distribution-row[b-asn79i5ynb] {
        flex-direction: column;
        align-items: stretch;
    }

    .rating-label[b-asn79i5ynb] {
        min-width: unset;
    }

    .nine-box-grid[b-asn79i5ynb] {
        grid-template-columns: 80px 1fr;
    }

    .grid-container[b-asn79i5ynb] {
        grid-template-rows: repeat(3, 100px);
    }

    .y-axis-label[b-asn79i5ynb],
    .x-axis-label[b-asn79i5ynb] {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .page-header[b-asn79i5ynb] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-asn79i5ynb] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-asn79i5ynb] {
        width: 100%;
    }

    .filter-buttons[b-asn79i5ynb] {
        flex-direction: column;
        width: 100%;
    }

    .filter-buttons .btn[b-asn79i5ynb] {
        width: 100%;
    }

    .nine-box-grid[b-asn79i5ynb] {
        grid-template-columns: 60px 1fr;
    }

    .grid-container[b-asn79i5ynb] {
        grid-template-rows: repeat(3, 80px);
        gap: 8px;
    }

    .cell-label[b-asn79i5ynb] {
        font-size: 0.75rem;
    }

    .employee-bubble[b-asn79i5ynb] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .modal-dialog[b-asn79i5ynb] {
        width: 95%;
    }
}
/* /Components/Pages/Manager/OnboardingDashboard.razor.rz.scp.css */
.onboarding-dashboard-page[b-wfnw3t3dfp] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Page Header */
.page-header h2[b-wfnw3t3dfp] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-wfnw3t3dfp] {
    display: flex;
    gap: 8px;
}

/* Loading State */
.loading-state[b-wfnw3t3dfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Metrics Row */
.metrics-row[b-wfnw3t3dfp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card[b-wfnw3t3dfp] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.metric-card:hover[b-wfnw3t3dfp] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.metric-icon[b-wfnw3t3dfp] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.metric-icon.bg-primary[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-warning[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-success[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-info[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-content[b-wfnw3t3dfp] {
    flex-grow: 1;
}

.metric-label[b-wfnw3t3dfp] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.metric-value[b-wfnw3t3dfp] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Filter Section */
.filter-section[b-wfnw3t3dfp] {
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Progress Grid */
.progress-grid[b-wfnw3t3dfp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}

.onboarding-card[b-wfnw3t3dfp] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid #667eea;
}

.onboarding-card:hover[b-wfnw3t3dfp] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.onboarding-card.overdue[b-wfnw3t3dfp] {
    border-left-color: #f5576c;
}

.onboarding-card.completed[b-wfnw3t3dfp] {
    border-left-color: #38ef7d;
}

.onboarding-card.ontrack[b-wfnw3t3dfp] {
    border-left-color: #4facfe;
}

.onboarding-card .card-header[b-wfnw3t3dfp] {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
}

.employee-info[b-wfnw3t3dfp] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.employee-avatar[b-wfnw3t3dfp] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

.employee-name[b-wfnw3t3dfp] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 4px;
}

.employee-title[b-wfnw3t3dfp] {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.status-badge[b-wfnw3t3dfp] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.ontrack[b-wfnw3t3dfp] {
    background: #d1f4dd;
    color: #0f5132;
}

.status-badge.overdue[b-wfnw3t3dfp] {
    background: #f8d7da;
    color: #842029;
}

.status-badge.completed[b-wfnw3t3dfp] {
    background: #d1e7dd;
    color: #0f5132;
}

.onboarding-card .card-body[b-wfnw3t3dfp] {
    padding: 20px;
}

.progress-section[b-wfnw3t3dfp] {
    margin-bottom: 20px;
}

.progress-header[b-wfnw3t3dfp] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #495057;
}

.progress-percent[b-wfnw3t3dfp] {
    font-weight: 700;
    color: #2c3e50;
}

.progress-bar-container[b-wfnw3t3dfp] {
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill[b-wfnw3t3dfp] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.progress-bar-fill.overdue[b-wfnw3t3dfp] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.progress-bar-fill.completed[b-wfnw3t3dfp] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.progress-bar-fill.ontrack[b-wfnw3t3dfp] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.progress-details[b-wfnw3t3dfp] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #6c757d;
}

.overdue-badge[b-wfnw3t3dfp] {
    background: #f8d7da;
    color: #842029;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.onboarding-stats[b-wfnw3t3dfp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.stat-item[b-wfnw3t3dfp] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.stat-item i[b-wfnw3t3dfp] {
    color: #667eea;
}

.overdue-alert[b-wfnw3t3dfp] {
    padding: 12px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #664d03;
}

.onboarding-card .card-footer[b-wfnw3t3dfp] {
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.onboarding-card .card-footer .btn[b-wfnw3t3dfp] {
    flex: 1;
    min-width: 100px;
}

/* Empty State */
.empty-state[b-wfnw3t3dfp] {
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.empty-state i[b-wfnw3t3dfp] {
    color: #dee2e6;
}

/* Timeline Section */
.timeline-section[b-wfnw3t3dfp] {
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.timeline-section .card-header[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.timeline-chart[b-wfnw3t3dfp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item[b-wfnw3t3dfp] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.timeline-label[b-wfnw3t3dfp] {
    min-width: 150px;
    font-weight: 500;
    color: #2c3e50;
}

.timeline-bar-container[b-wfnw3t3dfp] {
    flex-grow: 1;
    height: 30px;
    background: #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.timeline-bar[b-wfnw3t3dfp] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: width 0.5s ease;
}

.timeline-bar.overdue[b-wfnw3t3dfp] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.timeline-bar.completed[b-wfnw3t3dfp] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.timeline-bar.ontrack[b-wfnw3t3dfp] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.timeline-percent[b-wfnw3t3dfp] {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Department Summary */
.department-summary[b-wfnw3t3dfp] {
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.department-summary .card-header[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.progress-mini[b-wfnw3t3dfp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.progress-mini-fill[b-wfnw3t3dfp] {
    height: 8px;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-mini-text[b-wfnw3t3dfp] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #2c3e50;
}

/* Table Styles */
.table[b-wfnw3t3dfp] {
    background: white;
}

.table thead[b-wfnw3t3dfp] {
    background: #f8f9fa;
}

.table th[b-wfnw3t3dfp] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.table tbody tr:hover[b-wfnw3t3dfp] {
    background-color: #f8f9fa;
}

/* Form Elements */
.form-label[b-wfnw3t3dfp] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-wfnw3t3dfp],
.form-select[b-wfnw3t3dfp] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-wfnw3t3dfp],
.form-select:focus[b-wfnw3t3dfp] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

/* Buttons */
.btn[b-wfnw3t3dfp] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-sm[b-wfnw3t3dfp] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-primary[b-wfnw3t3dfp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-wfnw3t3dfp] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Cards */
.card[b-wfnw3t3dfp] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.card-body[b-wfnw3t3dfp] {
    padding: 24px;
}

/* Badge */
.badge[b-wfnw3t3dfp] {
    font-weight: 500;
    padding: 4px 10px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .progress-grid[b-wfnw3t3dfp] {
        grid-template-columns: 1fr;
    }

    .timeline-label[b-wfnw3t3dfp] {
        min-width: 120px;
        font-size: 0.9rem;
    }
}

@media (max-width: 992px) {
    .onboarding-dashboard-page[b-wfnw3t3dfp] {
        padding: 16px;
    }

    .metrics-row[b-wfnw3t3dfp] {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-item[b-wfnw3t3dfp] {
        flex-direction: column;
        align-items: stretch;
    }

    .timeline-label[b-wfnw3t3dfp] {
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .page-header[b-wfnw3t3dfp] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-wfnw3t3dfp] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-wfnw3t3dfp] {
        width: 100%;
    }

    .metrics-row[b-wfnw3t3dfp] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-wfnw3t3dfp] {
        padding: 16px;
    }

    .metric-icon[b-wfnw3t3dfp] {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .metric-value[b-wfnw3t3dfp] {
        font-size: 1.5rem;
    }

    .onboarding-card .card-header[b-wfnw3t3dfp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .onboarding-card .card-footer[b-wfnw3t3dfp] {
        flex-direction: column;
    }

    .onboarding-card .card-footer .btn[b-wfnw3t3dfp] {
        width: 100%;
    }
}

/* Animations */
@keyframes fadeIn-b-wfnw3t3dfp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.onboarding-card[b-wfnw3t3dfp],
.metric-card[b-wfnw3t3dfp] {
    animation: fadeIn-b-wfnw3t3dfp 0.3s ease;
}
/* /Components/Pages/Manager/PerformanceDashboard.razor.rz.scp.css */
.performance-dashboard-page[b-7yhaeimico] {
    padding: 24px;
    max-width: 1800px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header */
.page-header h2[b-7yhaeimico] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-7yhaeimico] {
    display: flex;
    gap: 8px;
}

/* Loading */
.loading-state[b-7yhaeimico] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Metrics Row */
.metrics-row[b-7yhaeimico] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card[b-7yhaeimico] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.metric-card:hover[b-7yhaeimico] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.metric-icon[b-7yhaeimico] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.metric-icon.bg-primary[b-7yhaeimico] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-warning[b-7yhaeimico] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-success[b-7yhaeimico] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-info[b-7yhaeimico] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-label[b-7yhaeimico] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value[b-7yhaeimico] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Current Cycle Card */
.current-cycle-card[b-7yhaeimico] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.current-cycle-card .card-header[b-7yhaeimico] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.cycle-status-badge[b-7yhaeimico] {
    background: rgba(255,255,255,0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
}

.cycle-progress[b-7yhaeimico] {
    padding: 20px 0;
}

.progress-header[b-7yhaeimico] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 500;
}

.progress-percent[b-7yhaeimico] {
    font-weight: 700;
    color: #667eea;
}

.progress-bar-container[b-7yhaeimico] {
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill[b-7yhaeimico] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.progress-details[b-7yhaeimico] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #6c757d;
}

.overdue-badge[b-7yhaeimico] {
    background: #f8d7da;
    color: #842029;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Action Items */
.action-items-card[b-7yhaeimico] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.action-items-card .card-header[b-7yhaeimico] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-items-list[b-7yhaeimico] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item[b-7yhaeimico] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.action-item .action-icon[b-7yhaeimico] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.action-icon.high[b-7yhaeimico] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-icon.medium[b-7yhaeimico] {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}

.action-icon.normal[b-7yhaeimico] {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.action-content[b-7yhaeimico] {
    flex-grow: 1;
}

.action-content strong[b-7yhaeimico] {
    color: #2c3e50;
    display: block;
    margin-bottom: 4px;
}

.action-content p[b-7yhaeimico] {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

/* Team Overview Table */
.team-overview-card[b-7yhaeimico] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.team-overview-card .card-header[b-7yhaeimico] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.performance-table thead[b-7yhaeimico] {
    background: #f8f9fa;
}

.performance-table th[b-7yhaeimico] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.employee-cell[b-7yhaeimico] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-avatar[b-7yhaeimico],
.employee-avatar-small[b-7yhaeimico] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
}

.employee-avatar-small[b-7yhaeimico] {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
}

.rating-display[b-7yhaeimico] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rating-value[b-7yhaeimico] {
    font-size: 1.2rem;
    font-weight: 700;
}

.rating-stars[b-7yhaeimico] {
    display: flex;
    gap: 2px;
}

.rating-stars .fa-star[b-7yhaeimico] {
    font-size: 0.8rem;
}

.rating-stars .fa-star.filled[b-7yhaeimico] {
    color: #ffd700;
}

.rating-stars .fa-star.empty[b-7yhaeimico] {
    color: #dee2e6;
}

.rating-display.excellent .rating-value[b-7yhaeimico] { color: #38ef7d; }
.rating-display.good .rating-value[b-7yhaeimico] { color: #4facfe; }
.rating-display.satisfactory .rating-value[b-7yhaeimico] { color: #f093fb; }
.rating-display.needs-improvement .rating-value[b-7yhaeimico] { color: #f5576c; }
.rating-display.unsatisfactory .rating-value[b-7yhaeimico] { color: #dc3545; }

.goals-progress[b-7yhaeimico] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-mini[b-7yhaeimico] {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    width: 100px;
}

.progress-mini-fill[b-7yhaeimico] {
    height: 100%;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    transition: width 0.3s ease;
}

.progress-mini-text[b-7yhaeimico] {
    font-size: 0.85rem;
    color: #6c757d;
}

.review-status-badge[b-7yhaeimico] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.review-status-badge.completed[b-7yhaeimico] {
    background: #d1e7dd;
    color: #0f5132;
}

.review-status-badge.inprogress[b-7yhaeimico] {
    background: #cfe2ff;
    color: #084298;
}

.review-status-badge.pending[b-7yhaeimico] {
    background: #fff3cd;
    color: #664d03;
}

.review-status-badge.not-started[b-7yhaeimico] {
    background: #e9ecef;
    color: #495057;
}

.table-actions[b-7yhaeimico] {
    display: flex;
    gap: 6px;
}

/* Distribution Chart */
.distribution-card[b-7yhaeimico] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.distribution-card .card-header[b-7yhaeimico] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.distribution-chart[b-7yhaeimico] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.distribution-row[b-7yhaeimico] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.distribution-label[b-7yhaeimico] {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rating-stars-small[b-7yhaeimico] {
    display: flex;
    gap: 2px;
}

.rating-stars-small .fa-star[b-7yhaeimico] {
    font-size: 0.7rem;
}

.rating-stars-small .fa-star.filled[b-7yhaeimico] {
    color: #ffd700;
}

.rating-stars-small .fa-star.empty[b-7yhaeimico] {
    color: #dee2e6;
}

.rating-text[b-7yhaeimico] {
    font-size: 0.9rem;
    color: #495057;
}

.distribution-bar-container[b-7yhaeimico] {
    flex-grow: 1;
    height: 28px;
    background: #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.distribution-bar[b-7yhaeimico] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: width 0.5s ease;
}

.distribution-bar.excellent[b-7yhaeimico] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.distribution-bar.good[b-7yhaeimico] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.distribution-bar.satisfactory[b-7yhaeimico] {
    background: linear-gradient(90deg, #fbc2eb 0%, #a6c1ee 100%);
}

.distribution-bar.needs-improvement[b-7yhaeimico] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.distribution-bar.unsatisfactory[b-7yhaeimico] {
    background: linear-gradient(90deg, #ff6b6b 0%, #ee5a6f 100%);
}

.distribution-count[b-7yhaeimico] {
    color: white;
    font-weight: 700;
}

.distribution-percentage[b-7yhaeimico] {
    min-width: 45px;
    text-align: right;
    font-weight: 600;
    color: #495057;
}

/* Goals Summary */
.goals-summary-card[b-7yhaeimico] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.goals-summary-card .card-header[b-7yhaeimico] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-purple[b-7yhaeimico] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.goals-stats[b-7yhaeimico] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.goal-stat-item[b-7yhaeimico] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.goal-stat-icon[b-7yhaeimico] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.goal-stat-icon.on-track[b-7yhaeimico] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.goal-stat-icon.at-risk[b-7yhaeimico] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.goal-stat-icon.behind[b-7yhaeimico] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.goal-stat-icon.completed[b-7yhaeimico] {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
}

.goal-stat-value[b-7yhaeimico] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
}

.goal-stat-label[b-7yhaeimico] {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Recent Reviews */
.recent-reviews-card[b-7yhaeimico] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.recent-reviews-list[b-7yhaeimico] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent-review-item[b-7yhaeimico] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.review-employee[b-7yhaeimico] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-type[b-7yhaeimico] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0;
}

.rating-display-small[b-7yhaeimico] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.rating-display-small.excellent[b-7yhaeimico] { background: #38ef7d; }
.rating-display-small.good[b-7yhaeimico] { background: #4facfe; }
.rating-display-small.satisfactory[b-7yhaeimico] { background: #f093fb; }
.rating-display-small.needs-improvement[b-7yhaeimico] { background: #f5576c; }
.rating-display-small.unsatisfactory[b-7yhaeimico] { background: #dc3545; }

.review-date[b-7yhaeimico] {
    color: #6c757d;
    font-size: 0.9rem;
    min-width: 120px;
}

.status-badge[b-7yhaeimico] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}

.status-badge.completed[b-7yhaeimico] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-badge.inprogress[b-7yhaeimico] {
    background: #cfe2ff;
    color: #084298;
}

.status-badge.pending[b-7yhaeimico] {
    background: #fff3cd;
    color: #664d03;
}

/* Cards */
.card[b-7yhaeimico] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 992px) {
    .performance-dashboard-page[b-7yhaeimico] {
        padding: 16px;
    }

    .metrics-row[b-7yhaeimico] {
        grid-template-columns: repeat(2, 1fr);
    }

    .goals-stats[b-7yhaeimico] {
        grid-template-columns: 1fr;
    }

    .distribution-label[b-7yhaeimico] {
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .page-header[b-7yhaeimico] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-7yhaeimico] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-7yhaeimico] {
        width: 100%;
    }

    .metrics-row[b-7yhaeimico] {
        grid-template-columns: 1fr;
    }

    .action-item[b-7yhaeimico] {
        flex-direction: column;
        align-items: flex-start;
    }

    .recent-review-item[b-7yhaeimico] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/NewHire/Portal.razor.rz.scp.css */
.newhire-portal[b-ow3bv785we] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0;
}

/* Loading & Empty States */
.loading-state[b-ow3bv785we],
.no-onboarding-state[b-ow3bv785we] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: white;
}

.no-onboarding-state i[b-ow3bv785we] {
    color: rgba(255, 255, 255, 0.5);
}

.no-onboarding-state h3[b-ow3bv785we] {
    color: white;
    margin-bottom: 8px;
}

/* Welcome Hero */
.welcome-hero[b-ow3bv785we] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 24px;
    color: white;
    text-align: center;
}

.hero-content[b-ow3bv785we] {
    max-width: 900px;
    margin: 0 auto;
}

.hero-icon[b-ow3bv785we] {
    font-size: 4rem;
    margin-bottom: 24px;
    animation: bounce-b-ow3bv785we 2s infinite;
}

.welcome-hero h1[b-ow3bv785we] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
}

.hero-subtitle[b-ow3bv785we] {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

.hero-stats[b-ow3bv785we] {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item[b-ow3bv785we] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px 32px;
    border-radius: 12px;
}

.stat-icon[b-ow3bv785we] {
    font-size: 2rem;
    opacity: 0.9;
}

.stat-content[b-ow3bv785we] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-label[b-ow3bv785we] {
    font-size: 0.85rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-ow3bv785we] {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Progress Section */
.progress-section[b-ow3bv785we] {
    max-width: 1200px;
    margin: -40px auto 40px;
    padding: 0 24px;
}

.progress-section h3[b-ow3bv785we] {
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.progress-container[b-ow3bv785we] {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.progress-bar-wrapper[b-ow3bv785we] {
    height: 40px;
    background: #e9ecef;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}

.progress-bar-fill[b-ow3bv785we] {
    height: 100%;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
}

.progress-text[b-ow3bv785we] {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.progress-details[b-ow3bv785we] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #495057;
}

.overdue-badge[b-ow3bv785we] {
    background: #ff6b6b;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Quick Actions */
.quick-actions[b-ow3bv785we] {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.action-card[b-ow3bv785we] {
    background: white;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.action-card:hover[b-ow3bv785we] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.action-card.active[b-ow3bv785we] {
    border-color: #667eea;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.action-card i[b-ow3bv785we] {
    font-size: 2rem;
    color: #667eea;
}

.action-card span[b-ow3bv785we] {
    font-weight: 600;
    color: #2c3e50;
}

.action-badge[b-ow3bv785we] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #ff6b6b;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Content Section */
.content-section[b-ow3bv785we] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

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

.content-header h4[b-ow3bv785we] {
    color: white;
    font-weight: 600;
}

/* Tasks Content */
.tasks-content[b-ow3bv785we] {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.task-group[b-ow3bv785we] {
    margin-bottom: 32px;
}

.task-group:last-child[b-ow3bv785we] {
    margin-bottom: 0;
}

.task-group h5[b-ow3bv785we] {
    color: #2c3e50;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

.task-group.overdue h5[b-ow3bv785we] {
    color: #ff6b6b;
    border-bottom-color: #ff6b6b;
}

.task-group.today h5[b-ow3bv785we] {
    color: #f093fb;
    border-bottom-color: #f093fb;
}

.task-group.upcoming h5[b-ow3bv785we] {
    color: #4facfe;
    border-bottom-color: #4facfe;
}

.task-group.completed h5[b-ow3bv785we] {
    color: #11998e;
    border-bottom-color: #11998e;
}

.task-card[b-ow3bv785we] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.task-card:hover[b-ow3bv785we] {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.task-card.overdue[b-ow3bv785we] {
    border-left: 4px solid #ff6b6b;
}

.task-card.today[b-ow3bv785we] {
    border-left: 4px solid #f093fb;
}

.task-card.completed[b-ow3bv785we] {
    opacity: 0.7;
    background: #f8f9fa;
}

.task-card-content[b-ow3bv785we] {
    display: flex;
    align-items: start;
    gap: 16px;
}

.task-checkbox input[type="checkbox"][b-ow3bv785we] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-top: 4px;
}

.task-checkbox input[type="checkbox"]:checked[b-ow3bv785we] {
    accent-color: #11998e;
}

.task-info[b-ow3bv785we] {
    flex-grow: 1;
}

.task-info h6[b-ow3bv785we] {
    color: #2c3e50;
    margin-bottom: 8px;
}

.task-info p[b-ow3bv785we] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.task-meta[b-ow3bv785we] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.task-meta span[b-ow3bv785we] {
    font-size: 0.85rem;
    color: #495057;
}

.task-actions[b-ow3bv785we] {
    flex-shrink: 0;
}

/* Documents Content */
.documents-content[b-ow3bv785we] {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.document-groups[b-ow3bv785we] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.document-group h5[b-ow3bv785we] {
    color: #2c3e50;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

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

.document-item[b-ow3bv785we] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    transition: all 0.2s ease;
}

.document-item:hover[b-ow3bv785we] {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-item.pending[b-ow3bv785we] {
    border-left: 4px solid #f093fb;
}

.document-item.completed[b-ow3bv785we] {
    border-left: 4px solid #11998e;
    opacity: 0.8;
}

.document-icon[b-ow3bv785we] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.document-info[b-ow3bv785we] {
    flex-grow: 1;
}

.document-info strong[b-ow3bv785we] {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.upload-area[b-ow3bv785we] {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    color: #6c757d;
    transition: all 0.3s ease;
}

.upload-area:hover[b-ow3bv785we] {
    border-color: #667eea;
    background: #f8f9fa;
}

.upload-area i[b-ow3bv785we] {
    color: #667eea;
}

/* Resources Content */
.resources-content[b-ow3bv785we] {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.resources-grid[b-ow3bv785we] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.resource-card[b-ow3bv785we] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.resource-card:hover[b-ow3bv785we] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.resource-icon[b-ow3bv785we] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: white;
}

.resource-card h5[b-ow3bv785we] {
    color: #2c3e50;
    margin-bottom: 12px;
}

.resource-card p[b-ow3bv785we] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Contacts Content */
.contacts-content[b-ow3bv785we] {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.contacts-grid[b-ow3bv785we] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.contact-card[b-ow3bv785we] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.contact-card:hover[b-ow3bv785we] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.contact-card.manager[b-ow3bv785we] {
    border-color: #667eea;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.contact-card.buddy[b-ow3bv785we] {
    border-color: #11998e;
}

.contact-badge[b-ow3bv785we] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #667eea;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.contact-card.buddy .contact-badge[b-ow3bv785we] {
    background: #11998e;
}

.contact-avatar[b-ow3bv785we] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
    font-size: 2rem;
}

.contact-card h5[b-ow3bv785we] {
    color: #2c3e50;
    margin-bottom: 4px;
}

.contact-title[b-ow3bv785we] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.contact-info[b-ow3bv785we] {
    text-align: left;
}

.contact-item[b-ow3bv785we] {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
    color: #495057;
}

.contact-item a[b-ow3bv785we] {
    color: #667eea;
    text-decoration: none;
}

.contact-item a:hover[b-ow3bv785we] {
    text-decoration: underline;
}

/* Animations */
@keyframes bounce-b-ow3bv785we {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .welcome-hero h1[b-ow3bv785we] {
        font-size: 2rem;
    }

    .hero-stats[b-ow3bv785we] {
        gap: 16px;
    }

    .stat-item[b-ow3bv785we] {
        padding: 16px 24px;
    }

    .quick-actions[b-ow3bv785we] {
        grid-template-columns: repeat(2, 1fr);
    }

    .resources-grid[b-ow3bv785we],
    .contacts-grid[b-ow3bv785we] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .welcome-hero[b-ow3bv785we] {
        padding: 40px 16px;
    }

    .welcome-hero h1[b-ow3bv785we] {
        font-size: 1.75rem;
    }

    .hero-stats[b-ow3bv785we] {
        flex-direction: column;
        gap: 12px;
    }

    .stat-item[b-ow3bv785we] {
        width: 100%;
    }

    .progress-section[b-ow3bv785we] {
        margin: -20px 16px 20px;
    }

    .quick-actions[b-ow3bv785we] {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .content-section[b-ow3bv785we] {
        padding: 0 16px 40px;
    }

    .tasks-content[b-ow3bv785we],
    .documents-content[b-ow3bv785we],
    .resources-content[b-ow3bv785we],
    .contacts-content[b-ow3bv785we] {
        padding: 20px;
    }

    .task-card-content[b-ow3bv785we] {
        flex-direction: column;
    }

    .task-actions[b-ow3bv785we] {
        width: 100%;
    }

    .task-actions button[b-ow3bv785we] {
        width: 100%;
    }
}
/* /Components/Pages/People/Compensation.razor.rz.scp.css */
.compensation-page[b-umfjy9deqk] {
    padding: 24px;
    min-height: 100vh;
    background: #f8f9fa;
}

.plan-card[b-umfjy9deqk] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

.budget-chart[b-umfjy9deqk] {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.budget-stat[b-umfjy9deqk] {
    padding: 12px;
}

.stat-value[b-umfjy9deqk] {
    font-size: 24px;
    font-weight: 700;
}

.stat-label[b-umfjy9deqk] {
    color: #6c757d;
}

.metric-row[b-umfjy9deqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.metric-item[b-umfjy9deqk] {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.guideline-item[b-umfjy9deqk] {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
}

.rating-stars[b-umfjy9deqk] {
    display: flex;
    gap: 2px;
}

.page-header[b-umfjy9deqk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.header-actions[b-umfjy9deqk] {
    display: flex;
    gap: 12px;
}

/* Modal Styling */
.modal.show[b-umfjy9deqk] {
    display: block;
}

.modal-content[b-umfjy9deqk] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header[b-umfjy9deqk] {
    border-bottom: 1px solid #e9ecef;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.modal-header .modal-title[b-umfjy9deqk] {
    margin: 0;
    font-weight: 600;
}

.modal-header .btn-close[b-umfjy9deqk] {
    filter: brightness(0) invert(1);
}

.modal-body[b-umfjy9deqk] {
    padding: 24px;
}

.modal-footer[b-umfjy9deqk] {
    padding: 16px 24px;
}

.form-label[b-umfjy9deqk] {
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.form-control:focus[b-umfjy9deqk],
.form-select:focus[b-umfjy9deqk] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.alert-info[b-umfjy9deqk] {
    background-color: #e7f3ff;
    border-color: #b3d9ff;
    color: #004085;
}

.spinner-border-sm[b-umfjy9deqk] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}
.guideline-item[b-umfjy9deqk] {
    display: flex;
    align-items: flex-start;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.rating-stars i[b-umfjy9deqk] {
    font-size: 0.9rem;
}

.table-hover tbody tr:hover[b-umfjy9deqk] {
    background-color: #f8f9fa;
}

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

    .table-responsive[b-umfjy9deqk] {
        font-size: 14px;
    }
}

/* Tabs */
.nav-tabs[b-umfjy9deqk] {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 2rem;
}

.nav-tabs .nav-link[b-umfjy9deqk] {
    color: #6c757d;
    font-weight: 500;
    border: none;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover[b-umfjy9deqk] {
    color: #495057;
    border-color: transparent;
    background: rgba(102, 126, 234, 0.1);
}

.nav-tabs .nav-link.active[b-umfjy9deqk] {
    color: #667eea;
    background: transparent;
    border-color: transparent;
    border-bottom: 3px solid #667eea;
    font-weight: 600;
}

.nav-tabs .nav-link i[b-umfjy9deqk] {
    margin-right: 0.5rem;
}
/* /Components/Pages/People/CompensationDashboard.razor.rz.scp.css */
/* Compensation Dashboard Styles */

/* Metric Cards */
.metric-card[b-gp3c4mhzw4] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.metric-card:hover[b-gp3c4mhzw4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.metric-icon[b-gp3c4mhzw4] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.metric-label[b-gp3c4mhzw4] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.metric-value[b-gp3c4mhzw4] {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    line-height: 1;
}

.metric-sublabel[b-gp3c4mhzw4] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Cards */
.card[b-gp3c4mhzw4] {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.card:hover[b-gp3c4mhzw4] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.card-header[b-gp3c4mhzw4] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-header h5[b-gp3c4mhzw4] {
    margin: 0;
    color: #495057;
}

.card-body[b-gp3c4mhzw4] {
    padding: 1.5rem;
}

/* Tables */
.table-hover tbody tr:hover[b-gp3c4mhzw4] {
    background-color: rgba(0, 123, 255, 0.05);
    cursor: pointer;
}

.table th[b-gp3c4mhzw4] {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
}

.table td[b-gp3c4mhzw4] {
    vertical-align: middle;
    font-size: 0.875rem;
}

.table-active[b-gp3c4mhzw4] {
    background-color: rgba(0, 123, 255, 0.08) !important;
}

.table-active td[b-gp3c4mhzw4] {
    font-weight: 600;
}

/* Badges */
.badge[b-gp3c4mhzw4] {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    font-weight: 600;
}

/* Quick Actions */
.btn-outline-primary.text-start[b-gp3c4mhzw4] {
    text-align: left;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-outline-primary.text-start:hover[b-gp3c4mhzw4] {
    transform: translateX(5px);
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.btn-outline-success.text-start[b-gp3c4mhzw4] {
    text-align: left;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-success.text-start:hover[b-gp3c4mhzw4] {
    transform: translateX(5px);
    background-color: #198754;
    border-color: #198754;
    color: white;
}

/* Chart Container */
canvas[b-gp3c4mhzw4] {
    max-height: 300px !important;
}

/* Empty States */
.text-muted[b-gp3c4mhzw4] {
    color: #6c757d !important;
}

.text-muted i[b-gp3c4mhzw4] {
    opacity: 0.5;
}

/* Loading State */
.spinner-border[b-gp3c4mhzw4] {
    width: 3rem;
    height: 3rem;
}

/* Alert Styling */
.alert[b-gp3c4mhzw4] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Select Dropdown */
.form-select[b-gp3c4mhzw4] {
    border-radius: 6px;
    border: 1px solid #ced4da;
    font-size: 0.9rem;
}

.form-select:focus[b-gp3c4mhzw4] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Responsive Design */
@media (max-width: 768px) {
    .metric-value[b-gp3c4mhzw4] {
        font-size: 1.5rem;
    }

    .metric-icon[b-gp3c4mhzw4] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .card-body[b-gp3c4mhzw4] {
        padding: 1rem;
    }

    .table[b-gp3c4mhzw4] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/People/EquityManagement/CapTable.razor.rz.scp.css */
.captable-dashboard[b-oxoidtyxc1] {
    padding: 1.5rem;
}

/* Page Header */
.page-header h2[b-oxoidtyxc1] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Metric Cards */
.metric-card[b-oxoidtyxc1] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-oxoidtyxc1] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-icon[b-oxoidtyxc1] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.metric-icon.bg-success[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-info[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon.bg-primary[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-warning[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-secondary[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #868f96 0%, #596164 100%);
}

.metric-icon i[b-oxoidtyxc1] {
    font-size: 1.75rem;
    color: white;
}

.metric-content[b-oxoidtyxc1] {
    flex: 1;
}

.metric-label[b-oxoidtyxc1] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metric-value[b-oxoidtyxc1] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.metric-subtitle[b-oxoidtyxc1] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Card Styling */
.card[b-oxoidtyxc1] {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-header[b-oxoidtyxc1] {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.card-header h5[b-oxoidtyxc1] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.1rem;
}

.card-body[b-oxoidtyxc1] {
    padding: 1.5rem;
}

/* Table Styling */
.table[b-oxoidtyxc1] {
    margin-bottom: 0;
}

.table thead th[b-oxoidtyxc1] {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 1rem 0.75rem;
}

.table tbody td[b-oxoidtyxc1] {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.table tbody tr[b-oxoidtyxc1] {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover[b-oxoidtyxc1] {
    background-color: #f8f9fa;
}

.table tfoot td[b-oxoidtyxc1] {
    padding: 1rem 0.75rem;
    border-top: 2px solid #dee2e6;
    font-size: 0.95rem;
}

/* Shareholder Avatar */
.shareholder-avatar[b-oxoidtyxc1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

/* Badge Styling */
.badge[b-oxoidtyxc1] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Quick Actions Buttons */
.btn-outline-primary:hover[b-oxoidtyxc1],
.btn-outline-success:hover[b-oxoidtyxc1],
.btn-outline-info:hover[b-oxoidtyxc1],
.btn-outline-warning:hover[b-oxoidtyxc1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Loading State */
.spinner-border[b-oxoidtyxc1] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .captable-dashboard[b-oxoidtyxc1] {
        padding: 1rem;
    }

    .metric-card[b-oxoidtyxc1] {
        padding: 1rem;
    }

    .metric-icon[b-oxoidtyxc1] {
        width: 50px;
        height: 50px;
    }

    .metric-icon i[b-oxoidtyxc1] {
        font-size: 1.5rem;
    }

    .metric-value[b-oxoidtyxc1] {
        font-size: 1.5rem;
    }

    .table[b-oxoidtyxc1] {
        font-size: 0.85rem;
    }

    .table thead th[b-oxoidtyxc1],
    .table tbody td[b-oxoidtyxc1],
    .table tfoot td[b-oxoidtyxc1] {
        padding: 0.75rem 0.5rem;
    }
}

/* Empty State */
.text-center i.fa-3x[b-oxoidtyxc1] {
    opacity: 0.3;
}

/* Search and Filter */
.form-control-sm[b-oxoidtyxc1],
.form-select-sm[b-oxoidtyxc1] {
    border-radius: 0.375rem;
    border-color: #ced4da;
}

.form-control-sm:focus[b-oxoidtyxc1],
.form-select-sm:focus[b-oxoidtyxc1] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Export Button */
.btn-success[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-oxoidtyxc1] {
    background: linear-gradient(135deg, #0e7d6f 0%, #2ec96a 100%);
}

/* Chart Container */
canvas[b-oxoidtyxc1] {
    display: block;
    width: 100% !important;
    height: auto !important;
}
/* /Components/Pages/People/EquityManagement/ExerciseWorkflow.razor.rz.scp.css */
<style>
.icon-circle[b-4084iipojk] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.icon-circle i[b-4084iipojk] {
    font-size: 20px;
}
</style[b-4084iipojk]>
/* /Components/Pages/People/EquityManagement/VestingDashboard.razor.rz.scp.css */
<style>
.icon-circle[b-7frwokk85b] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.icon-circle i[b-7frwokk85b] {
    font-size: 20px;
}
</style[b-7frwokk85b]>
/* /Components/Pages/People/HRDashboard.razor.rz.scp.css */
/* HR Dashboard Styles */

/* Metric Cards */
.metric-card[b-wwhrkkzlhp] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.metric-card:hover[b-wwhrkkzlhp] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.metric-icon[b-wwhrkkzlhp] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.metric-label[b-wwhrkkzlhp] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.metric-value[b-wwhrkkzlhp] {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    line-height: 1;
}

.metric-sublabel[b-wwhrkkzlhp] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.metric-change[b-wwhrkkzlhp] {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Stat Rows */
.stat-row[b-wwhrkkzlhp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

.stat-row:last-child[b-wwhrkkzlhp] {
    border-bottom: none;
}

.stat-label[b-wwhrkkzlhp] {
    color: #6c757d;
    font-size: 0.875rem;
}

.stat-value[b-wwhrkkzlhp] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #212529;
}

/* Tab Styling */
.nav-tabs .nav-link[b-wwhrkkzlhp] {
    color: #495057;
    font-weight: 500;
}

.nav-tabs .nav-link:hover[b-wwhrkkzlhp] {
    color: #0d6efd;
}

.nav-tabs .nav-link.active[b-wwhrkkzlhp] {
    font-weight: 600;
}

/* Cards */
.card[b-wwhrkkzlhp] {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header[b-wwhrkkzlhp] {
    background: white;
    border-bottom: 2px solid #f8f9fa;
}

/* Tables */
.table[b-wwhrkkzlhp] {
    margin-bottom: 0;
}

.table thead th[b-wwhrkkzlhp] {
    border-top: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    background-color: #f8f9fa;
}

.table-sm th[b-wwhrkkzlhp],
.table-sm td[b-wwhrkkzlhp] {
    padding: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .metric-card[b-wwhrkkzlhp] {
        flex-direction: column;
        text-align: center;
    }

    .metric-value[b-wwhrkkzlhp] {
        font-size: 1.5rem;
    }

    .table[b-wwhrkkzlhp] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/People/OKRDashboard.razor.rz.scp.css */
.okr-dashboard[b-wrk6fkhb5z] {
    padding: 1.5rem;
}

/* Page Header */
.page-header h2[b-wrk6fkhb5z] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Metric Cards */
.metric-card[b-wrk6fkhb5z] {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-wrk6fkhb5z] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-icon[b-wrk6fkhb5z] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.metric-icon.bg-primary[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-info[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon.bg-secondary[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #868e96 0%, #596164 100%);
}

.metric-icon.bg-success[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-warning[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-dark[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
}

.metric-icon i[b-wrk6fkhb5z] {
    font-size: 1.5rem;
    color: white;
}

.metric-content[b-wrk6fkhb5z] {
    flex: 1;
}

.metric-label[b-wrk6fkhb5z] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metric-value[b-wrk6fkhb5z] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

/* Card Styling */
.card[b-wrk6fkhb5z] {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-header[b-wrk6fkhb5z] {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.card-header h6[b-wrk6fkhb5z] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
}

/* Tabs */
.nav-tabs[b-wrk6fkhb5z] {
    border-bottom: none;
}

.nav-tabs .nav-link[b-wrk6fkhb5z] {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover[b-wrk6fkhb5z] {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.05);
}

.nav-tabs .nav-link.active[b-wrk6fkhb5z] {
    color: #667eea;
    background-color: transparent;
    border-bottom: 3px solid #667eea;
}

/* OKR List */
.okr-list[b-wrk6fkhb5z] {
    padding: 1.5rem;
}

.okr-section[b-wrk6fkhb5z] {
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.okr-section:hover[b-wrk6fkhb5z] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.okr-section h5[b-wrk6fkhb5z] {
    color: #2c3e50;
    font-weight: 600;
}

.okr-item[b-wrk6fkhb5z] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
}

.okr-item:hover[b-wrk6fkhb5z] {
    background: #e9ecef;
    border-left-color: #5568d3;
}

.okr-item.company-okr[b-wrk6fkhb5z] {
    border-left-color: #0d6efd;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.okr-item strong[b-wrk6fkhb5z] {
    color: #2c3e50;
    font-weight: 600;
}

.success-metric[b-wrk6fkhb5z] {
    padding: 0.5rem;
    background: white;
    border-radius: 0.25rem;
    border-left: 3px solid #0dcaf0;
    font-size: 0.9rem;
}

.progress-section[b-wrk6fkhb5z] {
    margin-top: 1rem;
}

.progress[b-wrk6fkhb5z] {
    background-color: #e9ecef;
    border-radius: 0.5rem;
}

.progress-bar[b-wrk6fkhb5z] {
    border-radius: 0.5rem;
    transition: width 0.6s ease;
}

/* OKR Actions */
.okr-actions[b-wrk6fkhb5z] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.okr-actions .btn-sm[b-wrk6fkhb5z] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Badge Styling */
.badge[b-wrk6fkhb5z] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Empty State */
.text-center i.fa-4x[b-wrk6fkhb5z] {
    opacity: 0.3;
}

/* Charts */
canvas[b-wrk6fkhb5z] {
    max-height: 300px;
}

/* Buttons */
.btn[b-wrk6fkhb5z] {
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-success[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #0e7d6f 0%, #2ec96a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.btn-primary[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-primary[b-wrk6fkhb5z] {
    border-color: #667eea;
    color: #667eea;
}

.btn-outline-primary:hover[b-wrk6fkhb5z] {
    background-color: #667eea;
    color: white;
}

/* Loading State */
.spinner-border[b-wrk6fkhb5z] {
    width: 3rem;
    height: 3rem;
}

/* Form Controls */
.form-select:focus[b-wrk6fkhb5z] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Responsive Design */
@media (max-width: 768px) {
    .okr-dashboard[b-wrk6fkhb5z] {
        padding: 1rem;
    }

    .metric-card[b-wrk6fkhb5z] {
        padding: 1rem;
    }

    .metric-icon[b-wrk6fkhb5z] {
        width: 40px;
        height: 40px;
    }

    .metric-icon i[b-wrk6fkhb5z] {
        font-size: 1.25rem;
    }

    .metric-value[b-wrk6fkhb5z] {
        font-size: 1.5rem;
    }

    .okr-list[b-wrk6fkhb5z] {
        padding: 1rem;
    }

    .okr-section[b-wrk6fkhb5z] {
        padding: 1rem !important;
    }

    .nav-tabs .nav-link[b-wrk6fkhb5z] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .okr-actions[b-wrk6fkhb5z] {
        justify-content: flex-start;
    }

    .okr-actions .btn-sm[b-wrk6fkhb5z] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Priority Colors */
.badge.bg-danger[b-wrk6fkhb5z] {
    background-color: #dc3545 !important;
}

.badge.bg-warning[b-wrk6fkhb5z] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-info[b-wrk6fkhb5z] {
    background-color: #0dcaf0 !important;
}

.badge.bg-secondary[b-wrk6fkhb5z] {
    background-color: #6c757d !important;
}

.badge.bg-success[b-wrk6fkhb5z] {
    background-color: #198754 !important;
}

.badge.bg-primary[b-wrk6fkhb5z] {
    background-color: #0d6efd !important;
}

/* Progress Bar Colors */
.progress-bar.bg-success[b-wrk6fkhb5z] {
    background-color: #198754 !important;
}

.progress-bar.bg-info[b-wrk6fkhb5z] {
    background-color: #0dcaf0 !important;
}

.progress-bar.bg-warning[b-wrk6fkhb5z] {
    background-color: #ffc107 !important;
}

.progress-bar.bg-danger[b-wrk6fkhb5z] {
    background-color: #dc3545 !important;
}

/* Animations */
@keyframes fadeIn-b-wrk6fkhb5z {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.okr-item[b-wrk6fkhb5z] {
    animation: fadeIn-b-wrk6fkhb5z 0.3s ease;
}

.metric-card[b-wrk6fkhb5z] {
    animation: fadeIn-b-wrk6fkhb5z 0.5s ease;
}

/* Company OKR Special Styling */
.okr-item.company-okr:hover[b-wrk6fkhb5z] {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
/* /Components/Pages/People/Performance.razor.rz.scp.css */
.performance-dashboard[b-xc8owz0mn7] {
    padding: 24px;
    min-height: 100vh;
    background: #f8f9fa;
}

.page-header[b-xc8owz0mn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1[b-xc8owz0mn7] {
    font-size: 28px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.page-header p[b-xc8owz0mn7] {
    margin: 4px 0 0 0;
}

.header-actions[b-xc8owz0mn7] {
    display: flex;
    gap: 12px;
}

.stat-card[b-xc8owz0mn7] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.stat-icon[b-xc8owz0mn7] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.stat-pending .stat-icon[b-xc8owz0mn7] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.stat-goals .stat-icon[b-xc8owz0mn7] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.stat-completed .stat-icon[b-xc8owz0mn7] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

.stat-rating .stat-icon[b-xc8owz0mn7] {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
}

.stat-content[b-xc8owz0mn7] {
    flex: 1;
}

.stat-label[b-xc8owz0mn7] {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 4px;
}

.stat-value[b-xc8owz0mn7] {
    font-size: 32px;
    font-weight: 700;
    color: #212529;
    line-height: 1;
}

.card[b-xc8owz0mn7] {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.card-header[b-xc8owz0mn7] {
    background: white;
    border-bottom: 1px solid #e9ecef;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
}

.card-header h5[b-xc8owz0mn7] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #212529;
}

.card-header h5 i[b-xc8owz0mn7] {
    color: #0d6efd;
    margin-right: 8px;
}

.goal-card[b-xc8owz0mn7] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #0d6efd;
}

.goal-card:hover[b-xc8owz0mn7] {
    background: #e9ecef;
}

.cycle-item[b-xc8owz0mn7] {
    background: #f8f9fa;
    transition: background 0.2s ease;
}

.cycle-item:hover[b-xc8owz0mn7] {
    background: #e9ecef;
}

.insight-item[b-xc8owz0mn7] {
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.insight-item:last-child[b-xc8owz0mn7] {
    border-bottom: none;
    padding-bottom: 0;
}

.table-hover tbody tr:hover[b-xc8owz0mn7] {
    background-color: #f8f9fa;
    cursor: pointer;
}

@media (max-width: 768px) {
    .performance-dashboard[b-xc8owz0mn7] {
        padding: 16px;
    }

    .page-header[b-xc8owz0mn7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .stat-card[b-xc8owz0mn7] {
        padding: 16px;
    }

    .stat-icon[b-xc8owz0mn7] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .stat-value[b-xc8owz0mn7] {
        font-size: 24px;
    }
}
/* /Components/Pages/People/PerformanceReview.razor.rz.scp.css */
.review-form-page[b-xoul4vavwb] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    background: #f8f9fa;
    min-height: 100vh;
}

.review-header h2[b-xoul4vavwb] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.review-header h4[b-xoul4vavwb] {
    font-size: 20px;
    font-weight: 500;
}

.review-timeline[b-xoul4vavwb] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-step[b-xoul4vavwb] {
    text-align: center;
    flex: 1;
    position: relative;
}

.step-icon[b-xoul4vavwb] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.timeline-step.active .step-icon[b-xoul4vavwb] {
    background: #0d6efd;
    color: white;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
}

.timeline-step.completed .step-icon[b-xoul4vavwb] {
    background: #28a745;
    color: white;
}

.step-label[b-xoul4vavwb] {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
}

.step-date[b-xoul4vavwb] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}

.timeline-connector[b-xoul4vavwb] {
    height: 2px;
    background: #e9ecef;
    flex: 1;
    margin: 0 8px;
    margin-bottom: 36px;
}

.timeline-connector.completed[b-xoul4vavwb] {
    background: #28a745;
}

.nav-tabs[b-xoul4vavwb] {
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs .nav-link[b-xoul4vavwb] {
    border: none;
    color: #6c757d;
    padding: 12px 24px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover[b-xoul4vavwb] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.nav-tabs .nav-link.active[b-xoul4vavwb] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.assessment-content[b-xoul4vavwb],
.review-summary[b-xoul4vavwb] {
    padding: 20px;
}

.content-box[b-xoul4vavwb] {
    background: #f8f9fa;
    border-left: 4px solid #0d6efd;
    padding: 16px;
    border-radius: 4px;
    margin: 16px 0;
    line-height: 1.6;
}

.rating-selector[b-xoul4vavwb] {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.rating-btn[b-xoul4vavwb] {
    width: 60px;
    height: 60px;
    border: 2px solid #dee2e6;
    background: white;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-btn:hover[b-xoul4vavwb] {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.rating-btn.selected[b-xoul4vavwb] {
    border-color: #0d6efd;
    background: #0d6efd;
    color: white;
}

.competency-item[b-xoul4vavwb] {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #0d6efd;
}

.competency-item label[b-xoul4vavwb] {
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.star-rating[b-xoul4vavwb] {
    display: flex;
    gap: 4px;
}

.rating-display[b-xoul4vavwb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.competency-view[b-xoul4vavwb] {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

.goal-item[b-xoul4vavwb] {
    background: white;
}

.goal-item h6[b-xoul4vavwb] {
    margin: 0;
    font-weight: 600;
}

.feedback-item[b-xoul4vavwb] {
    background: #f8f9fa;
}

@media (max-width: 768px) {
    .review-form-page[b-xoul4vavwb] {
        padding: 16px;
    }

    .review-timeline[b-xoul4vavwb] {
        flex-direction: column;
        gap: 16px;
    }

    .timeline-connector[b-xoul4vavwb] {
        display: none;
    }

    .rating-selector[b-xoul4vavwb] {
        flex-wrap: wrap;
    }

    .rating-btn[b-xoul4vavwb] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .nav-tabs .nav-link[b-xoul4vavwb] {
        padding: 8px 12px;
        font-size: 14px;
    }
}
/* /Components/Pages/People/SkillsMatrix.razor.rz.scp.css */
.skills-matrix-page[b-afl43iy4ul] {
    padding: 1.5rem;
}

/* Page Header */
.page-header h2[b-afl43iy4ul] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Metric Cards */
.metric-card[b-afl43iy4ul] {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.metric-card:hover[b-afl43iy4ul] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-icon[b-afl43iy4ul] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.metric-icon.bg-primary[b-afl43iy4ul] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-success[b-afl43iy4ul] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-info[b-afl43iy4ul] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-icon.bg-warning[b-afl43iy4ul] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon i[b-afl43iy4ul] {
    font-size: 1.5rem;
    color: white;
}

.metric-content[b-afl43iy4ul] {
    flex: 1;
}

.metric-label[b-afl43iy4ul] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metric-value[b-afl43iy4ul] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

.metric-detail[b-afl43iy4ul] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Card Styling */
.card[b-afl43iy4ul] {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-header[b-afl43iy4ul] {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

.card-header h6[b-afl43iy4ul] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
}

/* Tabs */
.nav-tabs[b-afl43iy4ul] {
    border-bottom: none;
}

.nav-tabs .nav-link[b-afl43iy4ul] {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover[b-afl43iy4ul] {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.05);
}

.nav-tabs .nav-link.active[b-afl43iy4ul] {
    color: #667eea;
    background-color: transparent;
    border-bottom: 3px solid #667eea;
}

/* Skills Matrix Table */
.table[b-afl43iy4ul] {
    margin-bottom: 0;
}

.table thead th[b-afl43iy4ul] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody tr[b-afl43iy4ul] {
    transition: all 0.3s ease;
}

.table tbody tr:hover[b-afl43iy4ul] {
    background-color: #f8f9fa;
}

/* Proficiency Bar */
.proficiency-bar[b-afl43iy4ul] {
    display: flex;
    height: 30px;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #e9ecef;
}

.proficiency-segment[b-afl43iy4ul] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.proficiency-segment:hover[b-afl43iy4ul] {
    opacity: 0.9;
    transform: scaleY(1.05);
}

.proficiency-segment.beginner[b-afl43iy4ul] {
    background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
}

.proficiency-segment.intermediate[b-afl43iy4ul] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.proficiency-segment.advanced[b-afl43iy4ul] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.proficiency-segment.expert[b-afl43iy4ul] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

/* Skill Cards (My Skills) */
.skill-card[b-afl43iy4ul] {
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
}

.skill-card:hover[b-afl43iy4ul] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.skill-card h6[b-afl43iy4ul] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
}

.skill-details[b-afl43iy4ul] {
    padding: 0.75rem 0;
    border-top: 1px solid #e9ecef;
    margin-top: 0.75rem;
}

.certification-badge[b-afl43iy4ul] {
    padding: 0.5rem;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe9cc 100%);
    border-radius: 0.375rem;
    border-left: 3px solid #ffc107;
}

.skill-actions[b-afl43iy4ul] {
    display: flex;
    gap: 0.5rem;
}

/* Expert Cards */
.expert-card[b-afl43iy4ul] {
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.expert-card:hover[b-afl43iy4ul] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.expert-avatar[b-afl43iy4ul] {
    flex-shrink: 0;
}

.mentor-badge[b-afl43iy4ul] {
    padding: 0.5rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 0.375rem;
    border-left: 3px solid #0dcaf0;
}

/* Badge Styling */
.badge[b-afl43iy4ul] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.badge.bg-success[b-afl43iy4ul] {
    background-color: #198754 !important;
}

.badge.bg-primary[b-afl43iy4ul] {
    background-color: #0d6efd !important;
}

.badge.bg-info[b-afl43iy4ul] {
    background-color: #0dcaf0 !important;
}

.badge.bg-secondary[b-afl43iy4ul] {
    background-color: #6c757d !important;
}

.badge.bg-warning[b-afl43iy4ul] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-danger[b-afl43iy4ul] {
    background-color: #dc3545 !important;
}

/* Buttons */
.btn[b-afl43iy4ul] {
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-success[b-afl43iy4ul] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
}

.btn-success:hover[b-afl43iy4ul] {
    background: linear-gradient(135deg, #0e7d6f 0%, #2ec96a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.btn-primary[b-afl43iy4ul] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-afl43iy4ul] {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-primary[b-afl43iy4ul] {
    border-color: #667eea;
    color: #667eea;
}

.btn-outline-primary:hover[b-afl43iy4ul] {
    background-color: #667eea;
    color: white;
}

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

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

/* Loading State */
.spinner-border[b-afl43iy4ul] {
    width: 3rem;
    height: 3rem;
}

/* Empty State */
.text-center i.fa-4x[b-afl43iy4ul] {
    opacity: 0.3;
}

.text-center i.fa-3x[b-afl43iy4ul] {
    opacity: 0.3;
}

/* Form Controls */
.form-select:focus[b-afl43iy4ul],
.form-control:focus[b-afl43iy4ul] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-select-sm[b-afl43iy4ul] {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
}

/* Input Group */
.input-group .form-control[b-afl43iy4ul] {
    border-right: none;
}

.input-group .btn[b-afl43iy4ul] {
    border-left: none;
}

/* List Group */
.list-group-item[b-afl43iy4ul] {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child[b-afl43iy4ul] {
    border-top: none;
}

/* Animations */
@keyframes fadeIn-b-afl43iy4ul {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.skill-card[b-afl43iy4ul] {
    animation: fadeIn-b-afl43iy4ul 0.3s ease;
}

.expert-card[b-afl43iy4ul] {
    animation: fadeIn-b-afl43iy4ul 0.3s ease;
}

.metric-card[b-afl43iy4ul] {
    animation: fadeIn-b-afl43iy4ul 0.5s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .skills-matrix-page[b-afl43iy4ul] {
        padding: 1rem;
    }

    .metric-card[b-afl43iy4ul] {
        padding: 1rem;
    }

    .metric-icon[b-afl43iy4ul] {
        width: 40px;
        height: 40px;
    }

    .metric-icon i[b-afl43iy4ul] {
        font-size: 1.25rem;
    }

    .metric-value[b-afl43iy4ul] {
        font-size: 1.5rem;
    }

    .nav-tabs .nav-link[b-afl43iy4ul] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .table[b-afl43iy4ul] {
        font-size: 0.875rem;
    }

    .proficiency-bar[b-afl43iy4ul] {
        height: 25px;
    }

    .skill-card[b-afl43iy4ul],
    .expert-card[b-afl43iy4ul] {
        padding: 1rem;
    }
}

/* Chart Containers */
canvas[b-afl43iy4ul] {
    max-height: 350px;
}

/* Table Responsiveness */
@media (max-width: 992px) {
    .table-responsive[b-afl43iy4ul] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Components/Pages/Performance/PerformanceAnalytics.razor.rz.scp.css */
.analytics-page[b-bcwq9f1aid] {
    padding: 24px;
    max-width: 1800px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header */
.page-header h2[b-bcwq9f1aid] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-bcwq9f1aid] {
    display: flex;
    gap: 8px;
}

/* Loading */
.loading-state[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Period Selector */
.period-selector[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Metrics Row */
.metrics-row[b-bcwq9f1aid] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card[b-bcwq9f1aid] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.metric-card:hover[b-bcwq9f1aid] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.metric-icon[b-bcwq9f1aid] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.metric-icon.bg-primary[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-icon.bg-success[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-icon.bg-warning[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-icon.bg-info[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-label[b-bcwq9f1aid] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value[b-bcwq9f1aid] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Trends Card */
.trends-card[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.trends-card .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.trend-chart[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trend-item[b-bcwq9f1aid] {
    display: grid;
    grid-template-columns: 150px 1fr 120px;
    gap: 20px;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.trend-label strong[b-bcwq9f1aid] {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.trend-label small[b-bcwq9f1aid] {
    color: #6c757d;
}

.trend-bars[b-bcwq9f1aid] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
}

.trend-bar-container[b-bcwq9f1aid] {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.trend-bar[b-bcwq9f1aid] {
    width: 100%;
    background: #667eea;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    min-height: 2px;
}

.trend-bar.rating-5[b-bcwq9f1aid] {
    background: linear-gradient(180deg, #11998e 0%, #38ef7d 100%);
}

.trend-bar.rating-4[b-bcwq9f1aid] {
    background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

.trend-bar.rating-3[b-bcwq9f1aid] {
    background: linear-gradient(180deg, #fbc2eb 0%, #a6c1ee 100%);
}

.trend-bar.rating-2[b-bcwq9f1aid] {
    background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
}

.trend-bar.rating-1[b-bcwq9f1aid] {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a6f 100%);
}

.trend-stats[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.avg-rating[b-bcwq9f1aid] {
    font-weight: 700;
    color: #2c3e50;
}

.completion-rate[b-bcwq9f1aid] {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Distribution Card */
.distribution-card[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.distribution-card .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.distribution-donut[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.distribution-segment[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.segment-bar[b-bcwq9f1aid] {
    height: 40px;
    background: #667eea;
    border-radius: 20px;
    transition: width 0.5s ease;
}

.distribution-segment.rating-5 .segment-bar[b-bcwq9f1aid] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.distribution-segment.rating-4 .segment-bar[b-bcwq9f1aid] {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.distribution-segment.rating-3 .segment-bar[b-bcwq9f1aid] {
    background: linear-gradient(90deg, #fbc2eb 0%, #a6c1ee 100%);
}

.distribution-segment.rating-2 .segment-bar[b-bcwq9f1aid] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.distribution-segment.rating-1 .segment-bar[b-bcwq9f1aid] {
    background: linear-gradient(90deg, #ff6b6b 0%, #ee5a6f 100%);
}

.segment-info[b-bcwq9f1aid] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.segment-label[b-bcwq9f1aid] {
    font-weight: 600;
    color: #2c3e50;
}

.segment-value[b-bcwq9f1aid] {
    color: #6c757d;
}

/* Goals Card */
.goals-card[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.goals-card .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.goal-stats[b-bcwq9f1aid] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.goal-stat-item[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.goal-stat-circle[b-bcwq9f1aid] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.goal-stat-circle.completed[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.goal-stat-circle.inprogress[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.goal-stat-circle.atrisk[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.goal-stat-circle.notstarted[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%);
}

.goal-stat-label[b-bcwq9f1aid] {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
}

.goal-progress[b-bcwq9f1aid] {
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
}

.progress-header[b-bcwq9f1aid] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-percent[b-bcwq9f1aid] {
    font-weight: 700;
    color: #667eea;
}

.progress-bar-container[b-bcwq9f1aid] {
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar-container.large[b-bcwq9f1aid] {
    height: 24px;
    border-radius: 12px;
}

.progress-bar-fill[b-bcwq9f1aid] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.progress-label[b-bcwq9f1aid] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Department Comparison */
.department-comparison[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.department-comparison .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.department-table[b-bcwq9f1aid] {
    background: white;
}

.department-table thead[b-bcwq9f1aid] {
    background: #f8f9fa;
}

.department-table th[b-bcwq9f1aid] {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.avg-rating-badge[b-bcwq9f1aid] {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 700;
}

.avg-rating-badge.excellent[b-bcwq9f1aid] {
    background: #d1e7dd;
    color: #0f5132;
}

.avg-rating-badge.good[b-bcwq9f1aid] {
    background: #cfe2ff;
    color: #084298;
}

.avg-rating-badge.satisfactory[b-bcwq9f1aid] {
    background: #e7f3ff;
    color: #084298;
}

.avg-rating-badge.needs-improvement[b-bcwq9f1aid] {
    background: #fff3cd;
    color: #664d03;
}

.avg-rating-badge.unsatisfactory[b-bcwq9f1aid] {
    background: #f8d7da;
    color: #842029;
}

.mini-distribution[b-bcwq9f1aid] {
    display: flex;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: #e9ecef;
}

.mini-bar[b-bcwq9f1aid] {
    height: 100%;
    transition: width 0.3s ease;
}

.mini-bar.rating-5[b-bcwq9f1aid] { background: #38ef7d; }
.mini-bar.rating-4[b-bcwq9f1aid] { background: #4facfe; }
.mini-bar.rating-3[b-bcwq9f1aid] { background: #a6c1ee; }
.mini-bar.rating-2[b-bcwq9f1aid] { background: #f5576c; }
.mini-bar.rating-1[b-bcwq9f1aid] { background: #dc3545; }

.progress-mini[b-bcwq9f1aid] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.progress-mini-fill[b-bcwq9f1aid] {
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-mini-text[b-bcwq9f1aid] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #2c3e50;
    min-width: 35px;
}

.completion-badge[b-bcwq9f1aid] {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.completion-badge.high[b-bcwq9f1aid] {
    background: #d1e7dd;
    color: #0f5132;
}

.completion-badge.medium[b-bcwq9f1aid] {
    background: #fff3cd;
    color: #664d03;
}

.completion-badge.low[b-bcwq9f1aid] {
    background: #f8d7da;
    color: #842029;
}

/* Cycle Metrics */
.cycle-metrics[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.metric-box[b-bcwq9f1aid] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.metric-box-label[b-bcwq9f1aid] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.metric-box-value[b-bcwq9f1aid] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.cycle-progress h6[b-bcwq9f1aid] {
    color: #495057;
    margin-bottom: 12px;
}

/* Top Performers */
.top-performers[b-bcwq9f1aid],
.improvement-needed[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.top-performers .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.improvement-needed .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

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

.performer-item[b-bcwq9f1aid] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.performer-rank[b-bcwq9f1aid] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.performer-info[b-bcwq9f1aid] {
    flex-grow: 1;
}

.performer-info strong[b-bcwq9f1aid] {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.performer-info small[b-bcwq9f1aid] {
    color: #6c757d;
}

.performer-rating[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rating-value[b-bcwq9f1aid] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #667eea;
}

.rating-stars-small[b-bcwq9f1aid] {
    display: flex;
    gap: 2px;
}

.rating-stars-small .fa-star[b-bcwq9f1aid] {
    font-size: 0.7rem;
}

.rating-stars-small .fa-star.filled[b-bcwq9f1aid] {
    color: #ffd700;
}

.rating-stars-small .fa-star.empty[b-bcwq9f1aid] {
    color: #dee2e6;
}

/* Needs Attention */
.needs-attention-list[b-bcwq9f1aid] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attention-item[b-bcwq9f1aid] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff3cd;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

.attention-icon[b-bcwq9f1aid] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffc107;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.attention-info[b-bcwq9f1aid] {
    flex-grow: 1;
}

.attention-info strong[b-bcwq9f1aid] {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.attention-info p[b-bcwq9f1aid] {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.attention-count[b-bcwq9f1aid] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    color: #ffc107;
}

/* Insights */
.insights-card[b-bcwq9f1aid] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.insights-card .card-header[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

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

.insight-item[b-bcwq9f1aid] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
}

.insight-item.success[b-bcwq9f1aid] {
    background: #d1e7dd;
    border-left: 4px solid #0f5132;
}

.insight-item.warning[b-bcwq9f1aid] {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.insight-item.info[b-bcwq9f1aid] {
    background: #cfe2ff;
    border-left: 4px solid #084298;
}

.insight-icon[b-bcwq9f1aid] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.insight-item.success .insight-icon[b-bcwq9f1aid] {
    background: #0f5132;
    color: white;
}

.insight-item.warning .insight-icon[b-bcwq9f1aid] {
    background: #ffc107;
    color: white;
}

.insight-item.info .insight-icon[b-bcwq9f1aid] {
    background: #084298;
    color: white;
}

.insight-content strong[b-bcwq9f1aid] {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.insight-content p[b-bcwq9f1aid] {
    color: #495057;
    margin: 0;
    font-size: 0.95rem;
}

/* Form Elements */
.form-label[b-bcwq9f1aid] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.form-control[b-bcwq9f1aid],
.form-select[b-bcwq9f1aid] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
}

.form-control:focus[b-bcwq9f1aid],
.form-select:focus[b-bcwq9f1aid] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

/* Cards */
.card[b-bcwq9f1aid] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.card-body[b-bcwq9f1aid] {
    padding: 24px;
}

/* Buttons */
.btn[b-bcwq9f1aid] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-bcwq9f1aid] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover[b-bcwq9f1aid] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Responsive */
@media (max-width: 1200px) {
    .trend-item[b-bcwq9f1aid] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .trend-bars[b-bcwq9f1aid] {
        height: 60px;
    }

    .trend-stats[b-bcwq9f1aid] {
        flex-direction: row;
        justify-content: space-between;
    }

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

@media (max-width: 992px) {
    .analytics-page[b-bcwq9f1aid] {
        padding: 16px;
    }

    .metrics-row[b-bcwq9f1aid] {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .page-header[b-bcwq9f1aid] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-bcwq9f1aid] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-bcwq9f1aid] {
        width: 100%;
    }

    .metrics-row[b-bcwq9f1aid] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-bcwq9f1aid] {
        padding: 16px;
    }

    .goal-stats[b-bcwq9f1aid] {
        grid-template-columns: 1fr;
    }

    .performer-item[b-bcwq9f1aid] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Performance/SelfAssessment.razor.rz.scp.css */
.self-assessment-page[b-90i861dayo] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header */
.page-header h2[b-90i861dayo] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-90i861dayo] {
    display: flex;
    gap: 8px;
}

/* Loading */
.loading-state[b-90i861dayo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* Progress Steps */
.progress-steps[b-90i861dayo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.step[b-90i861dayo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-number[b-90i861dayo] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.step.active .step-number[b-90i861dayo] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step.completed .step-number[b-90i861dayo] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.step.completed .step-number[b-90i861dayo]::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.step-label[b-90i861dayo] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.step.active .step-label[b-90i861dayo] {
    color: #667eea;
    font-weight: 700;
}

.step.completed .step-label[b-90i861dayo] {
    color: #11998e;
    font-weight: 600;
}

.step-connector[b-90i861dayo] {
    width: 60px;
    height: 2px;
    background: #e9ecef;
    margin: 0 8px;
}

/* Step Content */
.step-content[b-90i861dayo] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 24px;
}

.step-content .card-body[b-90i861dayo] {
    padding: 32px;
}

.step-section[b-90i861dayo] {
    animation: fadeIn-b-90i861dayo 0.3s ease;
}

.section-title[b-90i861dayo] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

.section-description[b-90i861dayo] {
    color: #6c757d;
    margin-bottom: 24px;
}

/* Achievements */
.achievements-list[b-90i861dayo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.achievement-item[b-90i861dayo] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.achievement-header[b-90i861dayo] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.achievement-title[b-90i861dayo] {
    flex-grow: 1;
    font-weight: 600;
}

/* Goals Review */
.goals-review[b-90i861dayo] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.goal-review-item[b-90i861dayo] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #38ef7d;
}

.goal-info h6[b-90i861dayo] {
    color: #2c3e50;
    margin-bottom: 8px;
}

.goal-rating[b-90i861dayo] {
    margin: 16px 0;
}

.goal-rating label[b-90i861dayo] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    display: block;
}

.progress-display[b-90i861dayo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar-container[b-90i861dayo] {
    flex-grow: 1;
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill[b-90i861dayo] {
    height: 100%;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    transition: width 0.5s ease;
}

.progress-text[b-90i861dayo] {
    min-width: 40px;
    font-weight: 700;
    color: #2c3e50;
}

.no-goals[b-90i861dayo],
.overall-goals-comment[b-90i861dayo] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Competencies */
.competencies-grid[b-90i861dayo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.competency-item[b-90i861dayo] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4facfe;
}

.competency-header[b-90i861dayo] {
    margin-bottom: 16px;
}

.competency-header strong[b-90i861dayo] {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.competency-header small[b-90i861dayo] {
    color: #6c757d;
}

.rating-selector[b-90i861dayo] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.rating-button[b-90i861dayo] {
    flex: 1;
    padding: 12px;
    border: 2px solid #dee2e6;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rating-button i[b-90i861dayo] {
    color: #dee2e6;
    font-size: 1.2rem;
}

.rating-button span[b-90i861dayo] {
    font-weight: 700;
    color: #6c757d;
}

.rating-button:hover[b-90i861dayo] {
    border-color: #667eea;
    background: #f8f9fa;
}

.rating-button.selected[b-90i861dayo] {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.rating-button.selected i[b-90i861dayo] {
    color: #ffd700;
}

.rating-button.selected span[b-90i861dayo] {
    color: white;
}

.rating-labels[b-90i861dayo] {
    display: flex;
    justify-content: space-between;
}

/* Development Section */
.development-section[b-90i861dayo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.development-section .form-label[b-90i861dayo] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.development-section .text-muted[b-90i861dayo] {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

/* Summary */
.summary-sections[b-90i861dayo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.summary-card[b-90i861dayo] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.summary-card h6[b-90i861dayo] {
    color: #2c3e50;
    margin-bottom: 12px;
}

.summary-card ul[b-90i861dayo] {
    margin: 12px 0;
    padding-left: 20px;
}

.summary-card p[b-90i861dayo] {
    margin: 8px 0;
}

.summary-card .text-warning[b-90i861dayo] {
    color: #ffc107 !important;
}

.final-comments[b-90i861dayo] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Tips Box */
.tips-box[b-90i861dayo] {
    padding: 16px;
    background: #e7f3ff;
    border-left: 4px solid #4facfe;
    border-radius: 8px;
}

.tips-box strong[b-90i861dayo] {
    color: #084298;
    display: block;
    margin-bottom: 8px;
}

.tips-box ul[b-90i861dayo] {
    margin: 0;
    padding-left: 20px;
}

.tips-box li[b-90i861dayo] {
    color: #495057;
    margin-bottom: 4px;
}

/* Navigation */
.step-navigation[b-90i861dayo] {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid #dee2e6;
}

/* Form Elements */
.form-label[b-90i861dayo] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.form-control[b-90i861dayo] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-90i861dayo] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    outline: none;
}

textarea.form-control[b-90i861dayo] {
    resize: vertical;
}

/* Buttons */
.btn[b-90i861dayo] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-90i861dayo] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover:not(:disabled)[b-90i861dayo] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled[b-90i861dayo] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.alert[b-90i861dayo] {
    border-radius: 8px;
    border: none;
}

.alert-warning[b-90i861dayo] {
    background: #fff3cd;
    color: #664d03;
}

/* No Review State */
.no-review[b-90i861dayo] {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.no-review i[b-90i861dayo] {
    color: #dee2e6;
}

/* Animations */
@keyframes fadeIn-b-90i861dayo {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .self-assessment-page[b-90i861dayo] {
        padding: 16px;
    }

    .step-content .card-body[b-90i861dayo] {
        padding: 24px;
    }

    .progress-steps[b-90i861dayo] {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .step-connector[b-90i861dayo] {
        min-width: 40px;
    }

    .competencies-grid[b-90i861dayo] {
        grid-template-columns: 1fr;
    }

    .summary-sections[b-90i861dayo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-90i861dayo] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-90i861dayo] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-90i861dayo] {
        width: 100%;
    }

    .progress-steps[b-90i861dayo] {
        padding: 16px;
    }

    .step[b-90i861dayo] {
        min-width: 80px;
    }

    .step-number[b-90i861dayo] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-label[b-90i861dayo] {
        font-size: 0.75rem;
    }

    .step-connector[b-90i861dayo] {
        min-width: 30px;
        width: 30px;
    }

    .step-content .card-body[b-90i861dayo] {
        padding: 16px;
    }

    .achievement-header[b-90i861dayo] {
        flex-direction: column;
    }

    .achievement-header .btn[b-90i861dayo] {
        width: 100%;
    }

    .competencies-grid[b-90i861dayo] {
        grid-template-columns: 1fr;
    }

    .rating-selector[b-90i861dayo] {
        flex-wrap: wrap;
    }

    .rating-button[b-90i861dayo] {
        min-width: 60px;
    }
}

@media (max-width: 576px) {
    .step-number[b-90i861dayo] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .step-label[b-90i861dayo] {
        display: none;
    }

    .step-connector[b-90i861dayo] {
        min-width: 20px;
        width: 20px;
    }

    .rating-button[b-90i861dayo] {
        padding: 8px;
    }

    .rating-button i[b-90i861dayo] {
        font-size: 1rem;
    }

    .rating-button span[b-90i861dayo] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Resources/Planning.razor.rz.scp.css */
/* Resource Planning Page Styles */

.resource-planning-page[b-qltxp3549v] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

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

.page-header h1[b-qltxp3549v] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

.page-header h1 i[b-qltxp3549v] {
    margin-right: 0.75rem;
    color: #3498db;
}

.page-header p[b-qltxp3549v] {
    margin: 0.5rem 0 0 0;
}

.page-header-actions[b-qltxp3549v] {
    display: flex;
    gap: 0.75rem;
}

/* Statistics Cards */
.stat-card[b-qltxp3549v] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

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

.stat-card-blue[b-qltxp3549v] {
    border-left-color: #3498db;
}

.stat-card-green[b-qltxp3549v] {
    border-left-color: #2ecc71;
}

.stat-card-orange[b-qltxp3549v] {
    border-left-color: #f39c12;
}

.stat-card-purple[b-qltxp3549v] {
    border-left-color: #9b59b6;
}

.stat-icon[b-qltxp3549v] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.stat-card-blue .stat-icon[b-qltxp3549v] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-card-green .stat-icon[b-qltxp3549v] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-card-orange .stat-icon[b-qltxp3549v] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.stat-card-purple .stat-icon[b-qltxp3549v] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.stat-info h3[b-qltxp3549v] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

.stat-info p[b-qltxp3549v] {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tabs */
.resource-tabs[b-qltxp3549v] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e9ecef;
}

.resource-tabs .tab[b-qltxp3549v] {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #7f8c8d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.resource-tabs .tab:hover[b-qltxp3549v] {
    color: #3498db;
    background: #f8f9fa;
}

.resource-tabs .tab.active[b-qltxp3549v] {
    color: #3498db;
    border-bottom-color: #3498db;
}

.resource-tabs .tab i[b-qltxp3549v] {
    margin-right: 0.5rem;
}

/* Tab Content */
.tab-content[b-qltxp3549v] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-height: 400px;
}

/* Capacity View */
.capacity-view .table[b-qltxp3549v] {
    margin-bottom: 0;
}

.capacity-view .table thead[b-qltxp3549v] {
    background: #f8f9fa;
}

.capacity-view .table thead th[b-qltxp3549v] {
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #dee2e6;
}

.capacity-view .progress[b-qltxp3549v] {
    position: relative;
}

.capacity-view .progress-bar[b-qltxp3549v] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Allocation Card */
.allocation-card[b-qltxp3549v] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.allocation-card:hover[b-qltxp3549v] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.allocation-header[b-qltxp3549v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.allocation-header h6[b-qltxp3549v] {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
}

.allocation-body[b-qltxp3549v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.allocation-info[b-qltxp3549v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #555;
}

.allocation-info i[b-qltxp3549v] {
    width: 20px;
    text-align: center;
}

.allocation-actions[b-qltxp3549v] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* Empty State */
.empty-state[b-qltxp3549v] {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state i[b-qltxp3549v] {
    opacity: 0.3;
}

.empty-state p[b-qltxp3549v] {
    color: #7f8c8d;
    margin-top: 1rem;
    font-size: 1.1rem;
}

/* Forecasts Table */
.forecasts-view .table tbody tr[b-qltxp3549v] {
    cursor: pointer;
}

.forecasts-view .table tbody tr:hover[b-qltxp3549v] {
    background: #f8f9fa;
}

/* Modal Backdrop */
.modal-backdrop[b-qltxp3549v] {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .resource-planning-page[b-qltxp3549v] {
        padding: 1rem;
    }

    .page-header[b-qltxp3549v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-header-actions[b-qltxp3549v] {
        width: 100%;
    }

    .page-header-actions button[b-qltxp3549v] {
        flex: 1;
    }

    .stat-card[b-qltxp3549v] {
        margin-bottom: 1rem;
    }

    .resource-tabs[b-qltxp3549v] {
        overflow-x: auto;
        white-space: nowrap;
    }

    .resource-tabs .tab[b-qltxp3549v] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .tab-content[b-qltxp3549v] {
        padding: 1rem;
    }
}
/* /Components/Pages/Schedule/EmployeeAvailability.razor.rz.scp.css */
/* Employee Availability Page Styles */

.employee-availability-page[b-vayjq7zce8] {
    animation: fadeIn-b-vayjq7zce8 0.3s ease-in;
}

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

.employee-availability-page .page-header h2[b-vayjq7zce8] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.employee-availability-page .page-header .text-muted[b-vayjq7zce8] {
    font-size: 0.95rem;
}

/* Day Tabs */
.employee-availability-page .nav-tabs[b-vayjq7zce8] {
    border-bottom: 2px solid #dee2e6;
}

.employee-availability-page .nav-tabs .nav-link[b-vayjq7zce8] {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease;
}

.employee-availability-page .nav-tabs .nav-link:hover[b-vayjq7zce8] {
    color: #495057;
    border-bottom-color: #e9ecef;
}

.employee-availability-page .nav-tabs .nav-link.active[b-vayjq7zce8] {
    color: #6f42c1;
    border-bottom-color: #6f42c1;
    background-color: transparent;
}

/* Form Controls */
.employee-availability-page .form-label[b-vayjq7zce8] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.employee-availability-page .form-label i[b-vayjq7zce8] {
    color: #6f42c1;
}

.employee-availability-page .form-check-input:checked[b-vayjq7zce8] {
    background-color: #6f42c1;
    border-color: #6f42c1;
}

.employee-availability-page .form-check-input:focus[b-vayjq7zce8] {
    border-color: #9f7aea;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

.employee-availability-page .form-control:focus[b-vayjq7zce8] {
    border-color: #9f7aea;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

.employee-availability-page .form-switch .form-check-input[b-vayjq7zce8] {
    width: 3rem;
    height: 1.5rem;
}

.employee-availability-page .form-switch .form-check-label[b-vayjq7zce8] {
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Shift Type Badges */
.employee-availability-page .badge[b-vayjq7zce8] {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Buttons */
.employee-availability-page .btn[b-vayjq7zce8] {
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.employee-availability-page .btn:hover[b-vayjq7zce8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.employee-availability-page .btn i[b-vayjq7zce8] {
    font-size: 1rem;
}

.employee-availability-page .btn-success[b-vayjq7zce8] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
}

.employee-availability-page .btn-success:hover[b-vayjq7zce8] {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
}

.employee-availability-page .btn-outline-primary:hover[b-vayjq7zce8] {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}

/* Alert Boxes */
.employee-availability-page .alert[b-vayjq7zce8] {
    border-left: 4px solid;
    animation: slideIn-b-vayjq7zce8 0.3s ease-out;
}

@keyframes slideIn-b-vayjq7zce8 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.employee-availability-page .alert-info[b-vayjq7zce8] {
    border-left-color: #0dcaf0;
    background-color: #e7f7fd;
}

.employee-availability-page .alert-secondary[b-vayjq7zce8] {
    border-left-color: #6c757d;
    background-color: #f5f6f7;
}

/* Cards */
.employee-availability-page .card[b-vayjq7zce8] {
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.employee-availability-page .card:hover[b-vayjq7zce8] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.employee-availability-page .card-header[b-vayjq7zce8] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e3e6f0;
    padding: 1rem 1.5rem;
}

.employee-availability-page .card-header h6[b-vayjq7zce8] {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0;
}

.employee-availability-page .card-body[b-vayjq7zce8] {
    padding: 1.5rem;
}

/* Loading State */
.employee-availability-page .spinner-border[b-vayjq7zce8] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .employee-availability-page .page-header h2[b-vayjq7zce8] {
        font-size: 1.5rem;
    }

    .employee-availability-page .nav-tabs .nav-link[b-vayjq7zce8] {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    .employee-availability-page .btn[b-vayjq7zce8] {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

    .employee-availability-page .card-body[b-vayjq7zce8] {
        padding: 1rem;
    }

    .employee-availability-page .row > [class*="col-"][b-vayjq7zce8] {
        margin-bottom: 1rem;
    }
}

/* Fade-in Animation for Cards */
.employee-availability-page .row .card[b-vayjq7zce8] {
    animation: cardFadeIn-b-vayjq7zce8 0.4s ease-in-out;
}

@keyframes cardFadeIn-b-vayjq7zce8 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quick Actions */
.employee-availability-page .btn-outline-primary[b-vayjq7zce8],
.employee-availability-page .btn-outline-secondary[b-vayjq7zce8],
.employee-availability-page .btn-outline-info[b-vayjq7zce8] {
    border-width: 2px;
    font-weight: 500;
}

.employee-availability-page .btn-outline-primary:hover[b-vayjq7zce8] {
    background-color: #6f42c1;
    color: white;
}

.employee-availability-page .btn-outline-secondary:hover[b-vayjq7zce8] {
    background-color: #6c757d;
    color: white;
}

.employee-availability-page .btn-outline-info:hover[b-vayjq7zce8] {
    background-color: #0dcaf0;
    color: white;
}

/* Form Text */
.employee-availability-page .form-text[b-vayjq7zce8] {
    color: #6c757d;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Summary Alert */
.employee-availability-page .alert strong[b-vayjq7zce8] {
    font-weight: 600;
}
/* /Components/Pages/Schedule/LaborCostDashboard.razor.rz.scp.css */
.labor-cost-dashboard[b-2aa9eisltv] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-2aa9eisltv] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-2aa9eisltv] {
    display: flex;
    gap: 8px;
}

/* Period Selector */
.period-selector .card-body[b-2aa9eisltv] {
    padding: 20px;
}

/* Cost Summary Cards */
.cost-summary-cards[b-2aa9eisltv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.cost-card[b-2aa9eisltv] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.cost-card:hover[b-2aa9eisltv] {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.cost-card.overtime-card[b-2aa9eisltv] {
    border-left: 4px solid #ffc107;
}

.card-icon[b-2aa9eisltv] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.card-icon.bg-primary[b-2aa9eisltv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.bg-success[b-2aa9eisltv] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.card-icon.bg-warning[b-2aa9eisltv] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-icon.bg-info[b-2aa9eisltv] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-content[b-2aa9eisltv] {
    flex-grow: 1;
}

.card-label[b-2aa9eisltv] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.card-value[b-2aa9eisltv] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 8px;
}

.card-subvalue[b-2aa9eisltv] {
    font-size: 0.95rem;
    color: #6c757d;
}

.card-change[b-2aa9eisltv] {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.card-change.positive[b-2aa9eisltv] {
    color: #dc3545;
}

.card-change.negative[b-2aa9eisltv] {
    color: #28a745;
}

/* Budget Comparison Chart */
.budget-comparison-chart[b-2aa9eisltv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart-row[b-2aa9eisltv] {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 16px;
}

.chart-label[b-2aa9eisltv] {
    font-weight: 600;
    color: #495057;
    text-align: right;
}

.chart-bar-container[b-2aa9eisltv] {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 8px;
    height: 40px;
    overflow: hidden;
}

.chart-bar[b-2aa9eisltv] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    border-radius: 8px;
    transition: width 0.5s ease;
}

.budget-bar[b-2aa9eisltv] {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
}

.actual-bar[b-2aa9eisltv] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    color: white;
    font-weight: 600;
}

.actual-bar.over-budget[b-2aa9eisltv] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.bar-value[b-2aa9eisltv] {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.variance-indicator[b-2aa9eisltv] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 600;
    font-size: 1.1rem;
}

.variance-indicator.over[b-2aa9eisltv] {
    color: #dc3545;
}

.variance-indicator.under[b-2aa9eisltv] {
    color: #28a745;
}

/* Department Cost List */
.department-cost-list[b-2aa9eisltv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.department-cost-item[b-2aa9eisltv] {
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

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

.dept-name[b-2aa9eisltv] {
    font-weight: 600;
    color: #2c3e50;
}

.dept-cost[b-2aa9eisltv] {
    font-weight: 700;
    color: #0d6efd;
}

.progress[b-2aa9eisltv] {
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.progress-bar[b-2aa9eisltv] {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    height: 100%;
    transition: width 0.5s ease;
}

.dept-details[b-2aa9eisltv] {
    font-size: 0.85rem;
}

/* Cost Breakdown Visual */
.cost-breakdown-visual[b-2aa9eisltv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.breakdown-item[b-2aa9eisltv] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.breakdown-color[b-2aa9eisltv] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.breakdown-color.regular[b-2aa9eisltv] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.breakdown-color.overtime[b-2aa9eisltv] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.breakdown-color.benefits[b-2aa9eisltv] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.breakdown-details[b-2aa9eisltv] {
    flex-grow: 1;
}

.breakdown-label[b-2aa9eisltv] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.breakdown-value[b-2aa9eisltv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

.breakdown-percent[b-2aa9eisltv] {
    font-size: 0.85rem;
    color: #0d6efd;
    font-weight: 600;
}

/* Daily Trend Chart */
.daily-trend-chart[b-2aa9eisltv] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 200px;
    padding: 20px 0;
}

.trend-day[b-2aa9eisltv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trend-bar-container[b-2aa9eisltv] {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.trend-bar[b-2aa9eisltv] {
    width: 80%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px 6px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.trend-bar:hover[b-2aa9eisltv] {
    transform: scaleY(1.05);
    box-shadow: 0 -4px 12px rgba(102, 126, 234, 0.3);
}

.trend-bar.over-budget[b-2aa9eisltv] {
    background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
}

.trend-label[b-2aa9eisltv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

.trend-value[b-2aa9eisltv] {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Overtime Alerts */
.alert-list[b-2aa9eisltv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-item[b-2aa9eisltv] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    align-items: center;
}

.alert-icon[b-2aa9eisltv] {
    width: 48px;
    height: 48px;
    background-color: #ffc107;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-content[b-2aa9eisltv] {
    flex-grow: 1;
}

.alert-title[b-2aa9eisltv] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.alert-message[b-2aa9eisltv] {
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 8px;
}

.alert-meta .badge[b-2aa9eisltv] {
    font-size: 0.85rem;
}

.alert-actions[b-2aa9eisltv] {
    flex-shrink: 0;
}

/* Projections Grid */
.projections-grid[b-2aa9eisltv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.projection-item[b-2aa9eisltv] {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.projection-label[b-2aa9eisltv] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.projection-value[b-2aa9eisltv] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.projection-change[b-2aa9eisltv] {
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
}

.projection-change.up[b-2aa9eisltv] {
    background-color: #ffe8e8;
    color: #dc3545;
}

.projection-change.down[b-2aa9eisltv] {
    background-color: #d4edda;
    color: #28a745;
}

/* Card Styles */
.card[b-2aa9eisltv] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header[b-2aa9eisltv] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
}

.card-header h5[b-2aa9eisltv] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
}

.card-body[b-2aa9eisltv] {
    padding: 20px;
}

/* Buttons */
.btn[b-2aa9eisltv] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-2aa9eisltv] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-2aa9eisltv] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

/* Loading State */
.spinner-border[b-2aa9eisltv] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .cost-summary-cards[b-2aa9eisltv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .projections-grid[b-2aa9eisltv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .labor-cost-dashboard[b-2aa9eisltv] {
        padding: 16px;
    }

    .header-actions[b-2aa9eisltv] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-2aa9eisltv] {
        width: 100%;
    }

    .daily-trend-chart[b-2aa9eisltv] {
        overflow-x: auto;
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .page-header[b-2aa9eisltv] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .cost-summary-cards[b-2aa9eisltv] {
        grid-template-columns: 1fr;
    }

    .cost-card[b-2aa9eisltv] {
        flex-direction: column;
        text-align: center;
    }

    .chart-row[b-2aa9eisltv] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .chart-label[b-2aa9eisltv] {
        text-align: left;
    }

    .projections-grid[b-2aa9eisltv] {
        grid-template-columns: 1fr;
    }

    .alert-item[b-2aa9eisltv] {
        flex-direction: column;
        text-align: center;
    }

    .period-selector .col-md-3[b-2aa9eisltv] {
        margin-bottom: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-2aa9eisltv {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cost-card[b-2aa9eisltv],
.alert-item[b-2aa9eisltv],
.projection-item[b-2aa9eisltv] {
    animation: fadeIn-b-2aa9eisltv 0.3s ease;
}

/* Form Controls */
.form-select[b-2aa9eisltv] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out;
}

.form-select:focus[b-2aa9eisltv] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

/* Badge Styles */
.badge[b-2aa9eisltv] {
    font-weight: 500;
    padding: 0.5em 0.75em;
}
/* /Components/Pages/Schedule/MobileScheduleView.razor.rz.scp.css */
/* Mobile Schedule View - PWA-Optimized Styles */

.mobile-schedule-view[b-szovfmh93k] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding-bottom: 80px; /* Space for bottom nav */
    animation: fadeIn-b-szovfmh93k 0.3s ease-in;
}

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

/* Header */
.mobile-header[b-szovfmh93k] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-header h2[b-szovfmh93k] {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-header .week-selector[b-szovfmh93k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
}

.week-selector button[b-szovfmh93k] {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.week-selector button:active[b-szovfmh93k] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.week-selector .current-week[b-szovfmh93k] {
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

/* View Toggle */
.view-toggle[b-szovfmh93k] {
    display: flex;
    gap: 0.5rem;
    margin: 1rem;
}

.view-toggle button[b-szovfmh93k] {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #6f42c1;
    background: white;
    color: #6f42c1;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.view-toggle button.active[b-szovfmh93k] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    box-shadow: 0 4px 8px rgba(111, 66, 193, 0.3);
}

.view-toggle button:active[b-szovfmh93k] {
    transform: scale(0.97);
}

/* Day Cards */
.day-cards[b-szovfmh93k] {
    padding: 0 1rem;
}

.day-card[b-szovfmh93k] {
    background: white;
    border-radius: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: slideUp-b-szovfmh93k 0.4s ease-out;
}

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

.day-card-header[b-szovfmh93k] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.day-info h3[b-szovfmh93k] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.day-info .date[b-szovfmh93k] {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

.day-hours[b-szovfmh93k] {
    text-align: right;
}

.day-hours .total[b-szovfmh93k] {
    font-size: 1.5rem;
    font-weight: 700;
}

.day-hours .label[b-szovfmh93k] {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Shift List */
.shift-list[b-szovfmh93k] {
    padding: 1rem;
}

.shift-item[b-szovfmh93k] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.shift-item:active[b-szovfmh93k] {
    transform: scale(0.98);
    background: #e9ecef;
}

.shift-time-indicator[b-szovfmh93k] {
    width: 60px;
    text-align: center;
    margin-right: 1rem;
}

.shift-time-indicator .time[b-szovfmh93k] {
    font-size: 1rem;
    font-weight: 700;
    color: #6f42c1;
}

.shift-time-indicator .duration[b-szovfmh93k] {
    font-size: 0.75rem;
    color: #6c757d;
}

.shift-details[b-szovfmh93k] {
    flex: 1;
}

.shift-details .shift-type[b-szovfmh93k] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.shift-details .shift-meta[b-szovfmh93k] {
    font-size: 0.875rem;
    color: #6c757d;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.shift-details .shift-meta span[b-szovfmh93k] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.shift-status[b-szovfmh93k] {
    width: 8px;
    height: 100%;
    border-radius: 4px;
}

.shift-status.scheduled[b-szovfmh93k] {
    background: #28a745;
}

.shift-status.pending[b-szovfmh93k] {
    background: #ffc107;
}

.shift-status.cancelled[b-szovfmh93k] {
    background: #dc3545;
}

/* Week Calendar View */
.week-calendar[b-szovfmh93k] {
    background: white;
    margin: 1rem;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.calendar-grid[b-szovfmh93k] {
    display: grid;
    gap: 0.5rem;
}

.calendar-day[b-szovfmh93k] {
    border: 2px solid #e3e6f0;
    border-radius: 0.75rem;
    padding: 1rem;
    min-height: 120px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.calendar-day:active[b-szovfmh93k] {
    transform: scale(0.98);
    background: #f8f9fa;
}

.calendar-day.today[b-szovfmh93k] {
    border-color: #6f42c1;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.05) 0%, rgba(159, 122, 234, 0.05) 100%);
}

.calendar-day-header[b-szovfmh93k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e3e6f0;
}

.calendar-day-header .day-name[b-szovfmh93k] {
    font-weight: 700;
    color: #2c3e50;
}

.calendar-day-header .day-number[b-szovfmh93k] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6f42c1;
}

.calendar-shifts[b-szovfmh93k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mini-shift[b-szovfmh93k] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.mini-shift .time[b-szovfmh93k] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.mini-shift .type[b-szovfmh93k] {
    opacity: 0.9;
}

/* Empty State */
.empty-day[b-szovfmh93k] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
}

.empty-day i[b-szovfmh93k] {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-day p[b-szovfmh93k] {
    font-size: 0.9375rem;
}

/* Stats Bar */
.stats-bar[b-szovfmh93k] {
    background: white;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-item[b-szovfmh93k] {
    text-align: center;
}

.stat-value[b-szovfmh93k] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6f42c1;
}

.stat-label[b-szovfmh93k] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Bottom Navigation */
.bottom-nav[b-szovfmh93k] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e3e6f0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-around;
    padding: 0.75rem 0;
    z-index: 100;
}

.bottom-nav button[b-szovfmh93k] {
    background: transparent;
    border: none;
    color: #6c757d;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.bottom-nav button.active[b-szovfmh93k] {
    color: #6f42c1;
}

.bottom-nav button i[b-szovfmh93k] {
    font-size: 1.5rem;
}

.bottom-nav button:active[b-szovfmh93k] {
    transform: scale(0.95);
}

/* Loading State */
.loading-container[b-szovfmh93k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1rem;
}

.loading-spinner[b-szovfmh93k] {
    width: 60px;
    height: 60px;
    border: 6px solid #e3e6f0;
    border-top-color: #6f42c1;
    border-radius: 50%;
    animation: spin-b-szovfmh93k 1s linear infinite;
}

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

.loading-text[b-szovfmh93k] {
    color: #6c757d;
    font-size: 0.9375rem;
}

/* Pull to Refresh */
.pull-to-refresh[b-szovfmh93k] {
    text-align: center;
    padding: 1rem;
    color: #6c757d;
    font-size: 0.875rem;
}

/* Swipe Indicator */
.swipe-indicator[b-szovfmh93k] {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swipe-indicator.left[b-szovfmh93k] {
    left: 1rem;
}

.swipe-indicator.right[b-szovfmh93k] {
    right: 1rem;
}

.swipe-indicator.visible[b-szovfmh93k] {
    opacity: 1;
}

/* Offline Indicator */
.offline-indicator[b-szovfmh93k] {
    background: #ffc107;
    color: #000;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .mobile-schedule-view[b-szovfmh93k] {
        max-width: 600px;
        margin: 0 auto;
    }

    .calendar-grid[b-szovfmh93k] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .calendar-grid[b-szovfmh93k] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Touch Feedback */
.shift-item:active[b-szovfmh93k],
.calendar-day:active[b-szovfmh93k],
.view-toggle button:active[b-szovfmh93k],
.bottom-nav button:active[b-szovfmh93k] {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth Scrolling */
.mobile-schedule-view[b-szovfmh93k] {
    -webkit-overflow-scrolling: touch;
}

/* Card Stagger Animation */
.day-card:nth-child(1)[b-szovfmh93k] {
    animation-delay: 0.05s;
}

.day-card:nth-child(2)[b-szovfmh93k] {
    animation-delay: 0.1s;
}

.day-card:nth-child(3)[b-szovfmh93k] {
    animation-delay: 0.15s;
}

.day-card:nth-child(4)[b-szovfmh93k] {
    animation-delay: 0.2s;
}

.day-card:nth-child(5)[b-szovfmh93k] {
    animation-delay: 0.25s;
}

.day-card:nth-child(6)[b-szovfmh93k] {
    animation-delay: 0.3s;
}

.day-card:nth-child(7)[b-szovfmh93k] {
    animation-delay: 0.35s;
}

/* Today Indicator */
.today-indicator[b-szovfmh93k] {
    display: inline-block;
    background: #ffc107;
    color: #000;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Shift Type Colors */
.shift-type-morning[b-szovfmh93k] {
    border-left: 4px solid #ffc107;
}

.shift-type-day[b-szovfmh93k] {
    border-left: 4px solid #0dcaf0;
}

.shift-type-evening[b-szovfmh93k] {
    border-left: 4px solid #fd7e14;
}

.shift-type-night[b-szovfmh93k] {
    border-left: 4px solid #6f42c1;
}
/* /Components/Pages/Schedule/OpenShiftMarketplace.razor.rz.scp.css */
/* Open Shift Marketplace Styles */

.open-shift-marketplace[b-0i6ybdk3ne] {
    animation: fadeIn-b-0i6ybdk3ne 0.3s ease-in;
}

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

/* Page Header */
.open-shift-marketplace .page-header h2[b-0i6ybdk3ne] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.open-shift-marketplace .page-header .text-muted[b-0i6ybdk3ne] {
    font-size: 0.95rem;
}

/* Stats Card */
.stats-card[b-0i6ybdk3ne] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 4px 8px rgba(111, 66, 193, 0.2);
}

.stats-card .stat-item[b-0i6ybdk3ne] {
    text-align: center;
}

.stats-card .stat-value[b-0i6ybdk3ne] {
    font-size: 2rem;
    font-weight: 700;
}

.stats-card .stat-label[b-0i6ybdk3ne] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Shift Cards */
.shift-card[b-0i6ybdk3ne] {
    position: relative;
    border: 2px solid #e3e6f0;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: cardFadeIn-b-0i6ybdk3ne 0.4s ease-in-out;
}

@keyframes cardFadeIn-b-0i6ybdk3ne {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shift-card:hover[b-0i6ybdk3ne] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

/* Priority Classes */
.shift-card.priority-urgent[b-0i6ybdk3ne] {
    border-left: 5px solid #dc3545;
}

.shift-card.priority-high[b-0i6ybdk3ne] {
    border-left: 5px solid #fd7e14;
}

.shift-card.priority-normal[b-0i6ybdk3ne] {
    border-left: 5px solid #28a745;
}

.shift-card.priority-low[b-0i6ybdk3ne] {
    border-left: 5px solid #0dcaf0;
}

/* Priority Badge */
.priority-badge[b-0i6ybdk3ne] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge.badge-urgent[b-0i6ybdk3ne] {
    background-color: #dc3545;
    color: white;
}

.priority-badge.badge-high[b-0i6ybdk3ne] {
    background-color: #fd7e14;
    color: white;
}

.priority-badge.badge-normal[b-0i6ybdk3ne] {
    background-color: #28a745;
    color: white;
}

.priority-badge.badge-low[b-0i6ybdk3ne] {
    background-color: #0dcaf0;
    color: white;
}

/* Incentive Badge */
.incentive-badge[b-0i6ybdk3ne] {
    position: absolute;
    top: 3.5rem;
    right: 1rem;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
    animation: pulseGlow-b-0i6ybdk3ne 2s ease-in-out infinite;
}

@keyframes pulseGlow-b-0i6ybdk3ne {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.6);
    }
}

/* Card Body */
.shift-card .card-body[b-0i6ybdk3ne] {
    padding: 1.5rem;
}

.shift-card .shift-date[b-0i6ybdk3ne] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.shift-card .shift-time[b-0i6ybdk3ne] {
    font-size: 1rem;
    color: #495057;
    display: flex;
    align-items: center;
}

.shift-card .shift-time i[b-0i6ybdk3ne] {
    color: #6f42c1;
    font-size: 1.125rem;
}

/* Shift Details */
.shift-details[b-0i6ybdk3ne] {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.shift-details .detail-item[b-0i6ybdk3ne] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.shift-details .detail-item:last-child[b-0i6ybdk3ne] {
    margin-bottom: 0;
}

.shift-details .detail-item i[b-0i6ybdk3ne] {
    color: #6f42c1;
    width: 20px;
}

/* Qualifications */
.qualifications[b-0i6ybdk3ne] {
    padding: 0.75rem;
    background-color: #e7f3ff;
    border-left: 3px solid #0d6efd;
    border-radius: 0.375rem;
}

/* Reason */
.reason[b-0i6ybdk3ne] {
    padding: 0.75rem;
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: 0.375rem;
}

/* Posted Info */
.posted-info[b-0i6ybdk3ne] {
    font-size: 0.8125rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e3e6f0;
}

/* Buttons */
.open-shift-marketplace .btn[b-0i6ybdk3ne] {
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.open-shift-marketplace .btn:hover[b-0i6ybdk3ne] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.open-shift-marketplace .btn-primary[b-0i6ybdk3ne] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    border: none;
}

.open-shift-marketplace .btn-primary:hover[b-0i6ybdk3ne] {
    background: linear-gradient(135deg, #5a32a3 0%, #8b68d4 100%);
}

.open-shift-marketplace .btn-success[b-0i6ybdk3ne] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
}

.open-shift-marketplace .btn-success:hover[b-0i6ybdk3ne] {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
}

.open-shift-marketplace .btn-outline-danger[b-0i6ybdk3ne] {
    border: 2px solid #dc3545;
    color: #dc3545;
}

.open-shift-marketplace .btn-outline-danger:hover[b-0i6ybdk3ne] {
    background-color: #dc3545;
    color: white;
}

/* Empty State */
.empty-state[b-0i6ybdk3ne] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state i[b-0i6ybdk3ne] {
    color: #dee2e6;
}

.empty-state h4[b-0i6ybdk3ne] {
    color: #495057;
    margin-top: 1rem;
}

.empty-state p[b-0i6ybdk3ne] {
    color: #6c757d;
    font-size: 1rem;
}

/* Alert Boxes */
.open-shift-marketplace .alert[b-0i6ybdk3ne] {
    border-left: 4px solid;
    animation: slideIn-b-0i6ybdk3ne 0.3s ease-out;
}

@keyframes slideIn-b-0i6ybdk3ne {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.open-shift-marketplace .alert-info[b-0i6ybdk3ne] {
    border-left-color: #0dcaf0;
    background-color: #e7f7fd;
}

.open-shift-marketplace .alert-success[b-0i6ybdk3ne] {
    border-left-color: #28a745;
    background-color: #d4edda;
}

.open-shift-marketplace .alert-danger[b-0i6ybdk3ne] {
    border-left-color: #dc3545;
    background-color: #f8d7da;
}

/* Modal */
.open-shift-marketplace .modal-content[b-0i6ybdk3ne] {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.open-shift-marketplace .modal-header[b-0i6ybdk3ne] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.open-shift-marketplace .modal-header .btn-close[b-0i6ybdk3ne] {
    filter: brightness(0) invert(1);
}

.open-shift-marketplace .modal-title[b-0i6ybdk3ne] {
    font-weight: 600;
}

.open-shift-marketplace .modal-body[b-0i6ybdk3ne] {
    padding: 1.5rem;
}

.open-shift-marketplace .modal-footer[b-0i6ybdk3ne] {
    border-top: 1px solid #e3e6f0;
    padding: 1rem 1.5rem;
}

/* Form Controls */
.open-shift-marketplace .form-label[b-0i6ybdk3ne] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.open-shift-marketplace .form-label .text-danger[b-0i6ybdk3ne] {
    color: #dc3545;
}

.open-shift-marketplace .form-select[b-0i6ybdk3ne],
.open-shift-marketplace .form-control[b-0i6ybdk3ne] {
    border: 2px solid #e3e6f0;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.open-shift-marketplace .form-select:focus[b-0i6ybdk3ne],
.open-shift-marketplace .form-control:focus[b-0i6ybdk3ne] {
    border-color: #9f7aea;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

.open-shift-marketplace .form-text[b-0i6ybdk3ne] {
    color: #6c757d;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Input Group */
.open-shift-marketplace .input-group-text[b-0i6ybdk3ne] {
    background-color: #f8f9fa;
    border: 2px solid #e3e6f0;
    color: #495057;
    font-weight: 600;
}

/* Loading State */
.open-shift-marketplace .spinner-border[b-0i6ybdk3ne] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .open-shift-marketplace .page-header h2[b-0i6ybdk3ne] {
        font-size: 1.5rem;
    }

    .stats-card[b-0i6ybdk3ne] {
        flex-direction: column;
        gap: 1rem;
    }

    .stats-card .stat-value[b-0i6ybdk3ne] {
        font-size: 1.5rem;
    }

    .shift-card .card-body[b-0i6ybdk3ne] {
        padding: 1rem;
    }

    .priority-badge[b-0i6ybdk3ne],
    .incentive-badge[b-0i6ybdk3ne] {
        position: static;
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    .incentive-badge[b-0i6ybdk3ne] {
        margin-left: 0.5rem;
    }

    .shift-card .shift-date[b-0i6ybdk3ne] {
        font-size: 1.125rem;
    }

    .shift-card .shift-time[b-0i6ybdk3ne] {
        font-size: 0.9375rem;
    }

    .shift-details .detail-item[b-0i6ybdk3ne] {
        font-size: 0.875rem;
    }
}

/* Filter Card */
.open-shift-marketplace .card[b-0i6ybdk3ne] {
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.open-shift-marketplace .card-body[b-0i6ybdk3ne] {
    padding: 1.25rem;
}

/* Small Select */
.form-select-sm[b-0i6ybdk3ne] {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Hover effect for claim button */
.shift-card .btn-success:hover[b-0i6ybdk3ne] {
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.3);
}

/* Stagger animation for cards */
.shift-card:nth-child(1)[b-0i6ybdk3ne] {
    animation-delay: 0.05s;
}

.shift-card:nth-child(2)[b-0i6ybdk3ne] {
    animation-delay: 0.1s;
}

.shift-card:nth-child(3)[b-0i6ybdk3ne] {
    animation-delay: 0.15s;
}

.shift-card:nth-child(4)[b-0i6ybdk3ne] {
    animation-delay: 0.2s;
}

.shift-card:nth-child(5)[b-0i6ybdk3ne] {
    animation-delay: 0.25s;
}

.shift-card:nth-child(6)[b-0i6ybdk3ne] {
    animation-delay: 0.3s;
}
/* /Components/Pages/Schedule/ScheduleBuilder.razor.rz.scp.css */
.schedule-builder[b-kf1wzb087z] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-kf1wzb087z] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-kf1wzb087z] {
    display: flex;
    gap: 8px;
}

/* Toolbar */
.schedule-toolbar .card-body[b-kf1wzb087z] {
    padding: 20px;
}

/* Schedule Grid */
.schedule-grid[b-kf1wzb087z] {
    overflow-x: auto;
}

.schedule-header[b-kf1wzb087z] {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr) 100px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.header-cell[b-kf1wzb087z] {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    border-right: 1px solid #e0e0e0;
}

.header-cell:last-child[b-kf1wzb087z] {
    border-right: none;
}

.day-name[b-kf1wzb087z] {
    font-size: 0.9rem;
    color: #495057;
}

.day-date[b-kf1wzb087z] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Schedule Body */
.schedule-body[b-kf1wzb087z] {
    max-height: calc(100vh - 400px);
    overflow-y: auto;
}

.employee-row[b-kf1wzb087z] {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr) 100px;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.employee-row:hover[b-kf1wzb087z] {
    background-color: #f8f9fa;
}

.employee-row.overtime-warning[b-kf1wzb087z] {
    background-color: #fff3cd;
}

.employee-row.underutilized[b-kf1wzb087z] {
    background-color: #d1ecf1;
}

.cell[b-kf1wzb087z] {
    padding: 12px;
    border-right: 1px solid #e0e0e0;
    min-height: 80px;
    position: relative;
}

.cell:last-child[b-kf1wzb087z] {
    border-right: none;
}

.day-column.cell[b-kf1wzb087z] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.day-column.cell:hover[b-kf1wzb087z] {
    background-color: #e9ecef;
}

.day-column.cell.today[b-kf1wzb087z] {
    background-color: #fff3e6;
}

.day-column.cell.today:hover[b-kf1wzb087z] {
    background-color: #ffe8cc;
}

/* Employee Info */
.employee-column[b-kf1wzb087z] {
    display: flex;
    align-items: center;
}

.employee-info[b-kf1wzb087z] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.employee-avatar[b-kf1wzb087z] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.avatar-placeholder[b-kf1wzb087z] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.employee-details[b-kf1wzb087z] {
    flex-grow: 1;
}

.employee-name[b-kf1wzb087z] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.employee-role[b-kf1wzb087z] {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Shift Chips */
.shift-chip[b-kf1wzb087z] {
    background-color: #0d6efd;
    color: white;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    cursor: pointer;
}

.shift-chip:hover[b-kf1wzb087z] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.shift-chip.shift-completed[b-kf1wzb087z] {
    background-color: #28a745;
}

.shift-chip.shift-absent[b-kf1wzb087z] {
    background-color: #dc3545;
}

.shift-time[b-kf1wzb087z] {
    font-weight: 600;
    margin-bottom: 2px;
}

.shift-name[b-kf1wzb087z] {
    opacity: 0.9;
}

.btn-remove[b-kf1wzb087z] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.3);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0;
    font-size: 0.7rem;
}

.shift-chip:hover .btn-remove[b-kf1wzb087z] {
    opacity: 1;
}

.btn-remove:hover[b-kf1wzb087z] {
    background: rgba(0,0,0,0.5);
}

.empty-cell[b-kf1wzb087z] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.day-column.cell:hover .empty-cell[b-kf1wzb087z] {
    opacity: 0.6;
}

/* Total Column */
.total-column[b-kf1wzb087z] {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-hours[b-kf1wzb087z] {
    font-weight: 600;
    font-size: 1.1rem;
    color: #495057;
}

/* Schedule Footer */
.schedule-footer[b-kf1wzb087z] {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr) 100px;
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
    font-weight: 600;
}

.coverage-info[b-kf1wzb087z] {
    text-align: center;
}

/* Day Schedule View */
.day-schedule .hourly-grid[b-kf1wzb087z] {
    display: flex;
    flex-direction: column;
}

.hour-row[b-kf1wzb087z] {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid #e0e0e0;
    min-height: 60px;
}

.hour-label[b-kf1wzb087z] {
    padding: 12px;
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    border-right: 1px solid #e0e0e0;
}

.hour-content[b-kf1wzb087z] {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.employee-shift-bar[b-kf1wzb087z] {
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Shift Templates Panel */
.shift-templates-panel[b-kf1wzb087z] {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.template-list[b-kf1wzb087z] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.template-chip[b-kf1wzb087z] {
    padding: 12px 16px;
    border-radius: 8px;
    color: white;
    cursor: move;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.template-chip:hover[b-kf1wzb087z] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.template-name[b-kf1wzb087z] {
    font-weight: 600;
    margin-bottom: 4px;
}

.template-time[b-kf1wzb087z] {
    opacity: 0.9;
}

/* Modal Styles */
.modal.show[b-kf1wzb087z] {
    display: block;
}

.modal-backdrop.show[b-kf1wzb087z] {
    opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .schedule-header[b-kf1wzb087z],
    .employee-row[b-kf1wzb087z],
    .schedule-footer[b-kf1wzb087z] {
        grid-template-columns: 180px repeat(7, minmax(80px, 1fr)) 90px;
    }
}

@media (max-width: 1200px) {
    .schedule-header[b-kf1wzb087z],
    .employee-row[b-kf1wzb087z],
    .schedule-footer[b-kf1wzb087z] {
        grid-template-columns: 160px repeat(7, minmax(70px, 1fr)) 80px;
    }

    .employee-name[b-kf1wzb087z] {
        font-size: 0.85rem;
    }

    .shift-chip[b-kf1wzb087z] {
        font-size: 0.75rem;
        padding: 6px 8px;
    }
}

@media (max-width: 992px) {
    .schedule-builder[b-kf1wzb087z] {
        padding: 16px;
    }

    .header-actions[b-kf1wzb087z] {
        flex-direction: column;
    }

    .header-actions button[b-kf1wzb087z] {
        width: 100%;
    }

    .schedule-toolbar .row[b-kf1wzb087z] {
        gap: 12px;
    }

    .schedule-toolbar .col-md-3[b-kf1wzb087z] {
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .page-header[b-kf1wzb087z] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .header-actions[b-kf1wzb087z] {
        width: 100%;
    }

    .schedule-grid[b-kf1wzb087z] {
        font-size: 0.85rem;
    }

    .employee-info[b-kf1wzb087z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .template-list[b-kf1wzb087z] {
        flex-direction: column;
    }

    .template-chip[b-kf1wzb087z] {
        width: 100%;
    }
}

/* Loading State */
.spinner-border[b-kf1wzb087z] {
    width: 3rem;
    height: 3rem;
}

/* Buttons */
.btn[b-kf1wzb087z] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-kf1wzb087z] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-kf1wzb087z] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:hover[b-kf1wzb087z],
.btn-outline-secondary:hover[b-kf1wzb087z] {
    transform: translateY(-1px);
}

/* Animations */
@keyframes fadeIn-b-kf1wzb087z {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employee-row[b-kf1wzb087z] {
    animation: fadeIn-b-kf1wzb087z 0.3s ease;
}
/* /Components/Pages/Schedule/ScheduleConflicts.razor.rz.scp.css */
/* Schedule Conflicts Page Styles */

.schedule-conflicts[b-qnd2kciytl] {
    animation: fadeIn-b-qnd2kciytl 0.3s ease-in;
}

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

/* Page Header */
.schedule-conflicts .page-header h2[b-qnd2kciytl] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.schedule-conflicts .page-header .text-muted[b-qnd2kciytl] {
    font-size: 0.95rem;
}

/* Summary Cards */
.summary-card[b-qnd2kciytl] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: cardSlideIn-b-qnd2kciytl 0.4s ease-in-out;
}

@keyframes cardSlideIn-b-qnd2kciytl {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.summary-card:hover[b-qnd2kciytl] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.summary-card .card-icon[b-qnd2kciytl] {
    font-size: 2.5rem;
    margin-right: 1rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.summary-card .card-content[b-qnd2kciytl] {
    flex: 1;
}

.summary-card .card-value[b-qnd2kciytl] {
    font-size: 2rem;
    font-weight: 700;
}

.summary-card .card-label[b-qnd2kciytl] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Critical Card */
.summary-card.critical .card-icon[b-qnd2kciytl] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.summary-card.critical .card-value[b-qnd2kciytl] {
    color: #dc3545;
}

/* High Card */
.summary-card.high .card-icon[b-qnd2kciytl] {
    background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%);
    color: white;
}

.summary-card.high .card-value[b-qnd2kciytl] {
    color: #fd7e14;
}

/* Medium Card */
.summary-card.medium .card-icon[b-qnd2kciytl] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: white;
}

.summary-card.medium .card-value[b-qnd2kciytl] {
    color: #ffc107;
}

/* Low Card */
.summary-card.low .card-icon[b-qnd2kciytl] {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    color: white;
}

.summary-card.low .card-value[b-qnd2kciytl] {
    color: #0dcaf0;
}

/* Tabs */
.schedule-conflicts .nav-tabs[b-qnd2kciytl] {
    border-bottom: 2px solid #dee2e6;
}

.schedule-conflicts .nav-tabs .nav-link[b-qnd2kciytl] {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease;
}

.schedule-conflicts .nav-tabs .nav-link:hover[b-qnd2kciytl] {
    color: #495057;
    border-bottom-color: #e9ecef;
}

.schedule-conflicts .nav-tabs .nav-link.active[b-qnd2kciytl] {
    color: #6f42c1;
    border-bottom-color: #6f42c1;
    background-color: transparent;
}

.schedule-conflicts .nav-tabs .badge[b-qnd2kciytl] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Conflict Cards */
.conflict-card[b-qnd2kciytl] {
    background: white;
    border: 2px solid #e3e6f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: conflictFadeIn-b-qnd2kciytl 0.4s ease-in-out;
}

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

.conflict-card:hover[b-qnd2kciytl] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Severity Classes */
.conflict-card.severity-critical[b-qnd2kciytl] {
    border-left: 5px solid #dc3545;
}

.conflict-card.severity-high[b-qnd2kciytl] {
    border-left: 5px solid #fd7e14;
}

.conflict-card.severity-medium[b-qnd2kciytl] {
    border-left: 5px solid #ffc107;
}

.conflict-card.severity-low[b-qnd2kciytl] {
    border-left: 5px solid #0dcaf0;
}

/* Conflict Header */
.conflict-header[b-qnd2kciytl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.conflict-type[b-qnd2kciytl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.conflict-type .type-icon[b-qnd2kciytl] {
    font-size: 1.5rem;
}

.conflict-type .type-name[b-qnd2kciytl] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
}

.severity-badge[b-qnd2kciytl] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.65rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-badge.badge-critical[b-qnd2kciytl] {
    background-color: #dc3545;
    color: white;
}

.severity-badge.badge-high[b-qnd2kciytl] {
    background-color: #fd7e14;
    color: white;
}

.severity-badge.badge-medium[b-qnd2kciytl] {
    background-color: #ffc107;
    color: #000;
}

.severity-badge.badge-low[b-qnd2kciytl] {
    background-color: #0dcaf0;
    color: #000;
}

/* Conflict Body */
.conflict-body[b-qnd2kciytl] {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.conflict-employee[b-qnd2kciytl] {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.conflict-description[b-qnd2kciytl] {
    font-size: 0.9375rem;
    color: #495057;
    line-height: 1.6;
}

.conflict-details[b-qnd2kciytl] {
    font-size: 0.875rem;
    color: #6c757d;
}

.conflict-details .detail-item[b-qnd2kciytl] {
    display: inline-flex;
    align-items: center;
}

/* Conflict Actions */
.conflict-actions[b-qnd2kciytl] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e3e6f0;
}

.conflict-actions .btn[b-qnd2kciytl] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.conflict-actions .btn:hover[b-qnd2kciytl] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Conflict Resolution */
.conflict-resolution[b-qnd2kciytl] {
    padding: 0.75rem;
    background-color: #d4edda;
    border-left: 3px solid #28a745;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    color: #155724;
}

/* Empty State */
.empty-state[b-qnd2kciytl] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state i[b-qnd2kciytl] {
    color: #28a745;
}

.empty-state h4[b-qnd2kciytl] {
    color: #495057;
    margin-top: 1rem;
}

.empty-state p[b-qnd2kciytl] {
    color: #6c757d;
    font-size: 1rem;
}

/* Alert Boxes */
.schedule-conflicts .alert[b-qnd2kciytl] {
    border-left: 4px solid;
    animation: slideIn-b-qnd2kciytl 0.3s ease-out;
}

@keyframes slideIn-b-qnd2kciytl {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.schedule-conflicts .alert-success[b-qnd2kciytl] {
    border-left-color: #28a745;
    background-color: #d4edda;
}

.schedule-conflicts .alert-danger[b-qnd2kciytl] {
    border-left-color: #dc3545;
    background-color: #f8d7da;
}

/* Modal */
.schedule-conflicts .modal-content[b-qnd2kciytl] {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.schedule-conflicts .modal-header[b-qnd2kciytl] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.schedule-conflicts .modal-header .btn-close[b-qnd2kciytl] {
    filter: brightness(0) invert(1);
}

.schedule-conflicts .modal-title[b-qnd2kciytl] {
    font-weight: 600;
}

.schedule-conflicts .modal-body[b-qnd2kciytl] {
    padding: 1.5rem;
}

.schedule-conflicts .modal-footer[b-qnd2kciytl] {
    border-top: 1px solid #e3e6f0;
    padding: 1rem 1.5rem;
}

/* Form Controls */
.schedule-conflicts .form-label[b-qnd2kciytl] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.schedule-conflicts .form-label .text-danger[b-qnd2kciytl] {
    color: #dc3545;
}

.schedule-conflicts .form-select[b-qnd2kciytl],
.schedule-conflicts .form-control[b-qnd2kciytl] {
    border: 2px solid #e3e6f0;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.schedule-conflicts .form-select:focus[b-qnd2kciytl],
.schedule-conflicts .form-control:focus[b-qnd2kciytl] {
    border-color: #9f7aea;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

/* Buttons */
.schedule-conflicts .btn[b-qnd2kciytl] {
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.schedule-conflicts .btn:hover[b-qnd2kciytl] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.schedule-conflicts .btn-primary[b-qnd2kciytl] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    border: none;
}

.schedule-conflicts .btn-primary:hover[b-qnd2kciytl] {
    background: linear-gradient(135deg, #5a32a3 0%, #8b68d4 100%);
}

/* Loading State */
.schedule-conflicts .spinner-border[b-qnd2kciytl] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .schedule-conflicts .page-header h2[b-qnd2kciytl] {
        font-size: 1.5rem;
    }

    .summary-card[b-qnd2kciytl] {
        padding: 1rem;
    }

    .summary-card .card-icon[b-qnd2kciytl] {
        font-size: 2rem;
        width: 50px;
        height: 50px;
    }

    .summary-card .card-value[b-qnd2kciytl] {
        font-size: 1.5rem;
    }

    .schedule-conflicts .nav-tabs .nav-link[b-qnd2kciytl] {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .conflict-card[b-qnd2kciytl] {
        padding: 1rem;
    }

    .conflict-type .type-name[b-qnd2kciytl] {
        font-size: 1rem;
    }

    .conflict-actions[b-qnd2kciytl] {
        flex-direction: column;
    }

    .conflict-actions .btn[b-qnd2kciytl] {
        width: 100%;
    }
}

/* Stagger animation for cards */
.conflict-card:nth-child(1)[b-qnd2kciytl] {
    animation-delay: 0.05s;
}

.conflict-card:nth-child(2)[b-qnd2kciytl] {
    animation-delay: 0.1s;
}

.conflict-card:nth-child(3)[b-qnd2kciytl] {
    animation-delay: 0.15s;
}

.conflict-card:nth-child(4)[b-qnd2kciytl] {
    animation-delay: 0.2s;
}

.conflict-card:nth-child(5)[b-qnd2kciytl] {
    animation-delay: 0.25s;
}

/* Pulse animation for critical badges */
.severity-badge.badge-critical[b-qnd2kciytl] {
    animation: pulseBadge-b-qnd2kciytl 2s ease-in-out infinite;
}

@keyframes pulseBadge-b-qnd2kciytl {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
}
/* /Components/Pages/Schedule/SchedulePublish.razor.rz.scp.css */
/* Schedule Publish Page Styles */

.schedule-publish[b-wq3nyk9p3f] {
    animation: fadeIn-b-wq3nyk9p3f 0.3s ease-in;
}

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

/* Page Header */
.schedule-publish .page-header h2[b-wq3nyk9p3f] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.schedule-publish .page-header .text-muted[b-wq3nyk9p3f] {
    font-size: 0.95rem;
}

/* Wizard Steps */
.publish-wizard[b-wq3nyk9p3f] {
    margin-bottom: 2rem;
}

.wizard-steps[b-wq3nyk9p3f] {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 3rem;
}

.wizard-steps[b-wq3nyk9p3f]::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e3e6f0;
    z-index: 0;
}

.wizard-step[b-wq3nyk9p3f] {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-circle[b-wq3nyk9p3f] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e3e6f0;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 0.75rem;
    transition: all 0.3s ease;
    border: 3px solid #e3e6f0;
}

.wizard-step.active .step-circle[b-wq3nyk9p3f] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    border-color: #6f42c1;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.wizard-step.completed .step-circle[b-wq3nyk9p3f] {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.step-label[b-wq3nyk9p3f] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
}

.wizard-step.active .step-label[b-wq3nyk9p3f] {
    color: #6f42c1;
    font-weight: 600;
}

.wizard-step.completed .step-label[b-wq3nyk9p3f] {
    color: #28a745;
}

/* Publication Card */
.publication-card[b-wq3nyk9p3f] {
    background: white;
    border: 2px solid #e3e6f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.publication-card:hover[b-wq3nyk9p3f] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.publication-card h4[b-wq3nyk9p3f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Date Range Selector */
.date-range-selector[b-wq3nyk9p3f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.date-input-group[b-wq3nyk9p3f] {
    display: flex;
    flex-direction: column;
}

.date-input-group label[b-wq3nyk9p3f] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

/* Quick Date Buttons */
.quick-dates[b-wq3nyk9p3f] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.quick-dates .btn[b-wq3nyk9p3f] {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Preview Section */
.schedule-preview[b-wq3nyk9p3f] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.preview-header[b-wq3nyk9p3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
}

.preview-stats[b-wq3nyk9p3f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-box[b-wq3nyk9p3f] {
    background: white;
    padding: 1rem;
    border-radius: 0.375rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-value[b-wq3nyk9p3f] {
    font-size: 2rem;
    font-weight: 700;
    color: #6f42c1;
}

.stat-label[b-wq3nyk9p3f] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Employee List */
.employee-list[b-wq3nyk9p3f] {
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border-radius: 0.375rem;
    padding: 1rem;
}

.employee-item[b-wq3nyk9p3f] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #e3e6f0;
    transition: background-color 0.2s ease;
}

.employee-item:last-child[b-wq3nyk9p3f] {
    border-bottom: none;
}

.employee-item:hover[b-wq3nyk9p3f] {
    background-color: #f8f9fa;
}

.employee-avatar[b-wq3nyk9p3f] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 1rem;
}

.employee-info[b-wq3nyk9p3f] {
    flex: 1;
}

.employee-name[b-wq3nyk9p3f] {
    font-weight: 500;
    color: #2c3e50;
}

.employee-shifts[b-wq3nyk9p3f] {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Notification Options */
.notification-options[b-wq3nyk9p3f] {
    background-color: #e7f3ff;
    border: 1px solid #0dcaf0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.notification-options h5[b-wq3nyk9p3f] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

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

.checkbox-item[b-wq3nyk9p3f] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-item:hover[b-wq3nyk9p3f] {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.checkbox-item input[type="checkbox"][b-wq3nyk9p3f] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    cursor: pointer;
}

.checkbox-label[b-wq3nyk9p3f] {
    font-weight: 500;
    color: #495057;
}

/* Publication History */
.publication-history[b-wq3nyk9p3f] {
    background: white;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.publication-history h4[b-wq3nyk9p3f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.history-item[b-wq3nyk9p3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-left: 4px solid #6f42c1;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.history-item:hover[b-wq3nyk9p3f] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.history-info[b-wq3nyk9p3f] {
    flex: 1;
}

.history-date[b-wq3nyk9p3f] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.history-meta[b-wq3nyk9p3f] {
    font-size: 0.875rem;
    color: #6c757d;
}

.history-status[b-wq3nyk9p3f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge[b-wq3nyk9p3f] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.65rem;
    border-radius: 0.25rem;
}

.status-badge.published[b-wq3nyk9p3f] {
    background-color: #28a745;
    color: white;
}

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

/* Action Buttons */
.action-buttons[b-wq3nyk9p3f] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.action-buttons .btn[b-wq3nyk9p3f] {
    flex: 1;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.action-buttons .btn:hover[b-wq3nyk9p3f] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.schedule-publish .btn-primary[b-wq3nyk9p3f] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    border: none;
}

.schedule-publish .btn-primary:hover[b-wq3nyk9p3f] {
    background: linear-gradient(135deg, #5a32a3 0%, #8b68d4 100%);
}

.schedule-publish .btn-success[b-wq3nyk9p3f] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
}

.schedule-publish .btn-success:hover[b-wq3nyk9p3f] {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
}

/* Alert Boxes */
.schedule-publish .alert[b-wq3nyk9p3f] {
    border-left: 4px solid;
    animation: slideIn-b-wq3nyk9p3f 0.3s ease-out;
}

@keyframes slideIn-b-wq3nyk9p3f {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.schedule-publish .alert-success[b-wq3nyk9p3f] {
    border-left-color: #28a745;
    background-color: #d4edda;
}

.schedule-publish .alert-warning[b-wq3nyk9p3f] {
    border-left-color: #ffc107;
    background-color: #fff3cd;
}

.schedule-publish .alert-info[b-wq3nyk9p3f] {
    border-left-color: #0dcaf0;
    background-color: #e7f7fd;
}

/* Form Controls */
.schedule-publish .form-label[b-wq3nyk9p3f] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.schedule-publish .form-control[b-wq3nyk9p3f],
.schedule-publish .form-select[b-wq3nyk9p3f] {
    border: 2px solid #e3e6f0;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.schedule-publish .form-control:focus[b-wq3nyk9p3f],
.schedule-publish .form-select:focus[b-wq3nyk9p3f] {
    border-color: #9f7aea;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

/* Loading State */
.schedule-publish .spinner-border[b-wq3nyk9p3f] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Empty State */
.empty-state[b-wq3nyk9p3f] {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state i[b-wq3nyk9p3f] {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state h4[b-wq3nyk9p3f] {
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state p[b-wq3nyk9p3f] {
    color: #6c757d;
}

/* Confirmation Dialog */
.confirmation-dialog[b-wq3nyk9p3f] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.confirmation-dialog h5[b-wq3nyk9p3f] {
    color: #856404;
    margin-bottom: 1rem;
}

.confirmation-dialog ul[b-wq3nyk9p3f] {
    margin-bottom: 1rem;
}

.confirmation-dialog li[b-wq3nyk9p3f] {
    color: #856404;
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .schedule-publish .page-header h2[b-wq3nyk9p3f] {
        font-size: 1.5rem;
    }

    .wizard-steps[b-wq3nyk9p3f] {
        flex-direction: column;
        align-items: center;
    }

    .wizard-steps[b-wq3nyk9p3f]::before {
        display: none;
    }

    .wizard-step[b-wq3nyk9p3f] {
        margin-bottom: 1.5rem;
    }

    .date-range-selector[b-wq3nyk9p3f] {
        grid-template-columns: 1fr;
    }

    .quick-dates[b-wq3nyk9p3f] {
        flex-direction: column;
    }

    .quick-dates .btn[b-wq3nyk9p3f] {
        width: 100%;
    }

    .preview-stats[b-wq3nyk9p3f] {
        grid-template-columns: 1fr;
    }

    .notification-checkboxes[b-wq3nyk9p3f] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-wq3nyk9p3f] {
        flex-direction: column;
    }

    .action-buttons .btn[b-wq3nyk9p3f] {
        width: 100%;
    }

    .history-item[b-wq3nyk9p3f] {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-status[b-wq3nyk9p3f] {
        margin-top: 0.75rem;
    }
}

/* Scroll Styling */
.employee-list[b-wq3nyk9p3f]::-webkit-scrollbar {
    width: 8px;
}

.employee-list[b-wq3nyk9p3f]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.employee-list[b-wq3nyk9p3f]::-webkit-scrollbar-thumb {
    background: #6f42c1;
    border-radius: 4px;
}

.employee-list[b-wq3nyk9p3f]::-webkit-scrollbar-thumb:hover {
    background: #5a32a3;
}

/* Success Animation */
@keyframes successPulse-b-wq3nyk9p3f {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.publication-card.success[b-wq3nyk9p3f] {
    animation: successPulse-b-wq3nyk9p3f 0.6s ease-in-out;
    border-color: #28a745;
}
/* /Components/Pages/Schedule/ScheduleReports.razor.rz.scp.css */
.schedule-reports-page[b-dw0z6fej29] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-dw0z6fej29] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-dw0z6fej29] {
    display: flex;
    gap: 8px;
}

/* Report Period Selector */
.report-period-selector .card-body[b-dw0z6fej29] {
    padding: 20px;
}

/* Metrics Cards */
.metrics-cards[b-dw0z6fej29] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card[b-dw0z6fej29] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.metric-card:hover[b-dw0z6fej29] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.metric-icon[b-dw0z6fej29] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
}

.metric-card.compliance .metric-icon[b-dw0z6fej29] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.metric-card.coverage .metric-icon[b-dw0z6fej29] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.metric-card.overtime .metric-icon[b-dw0z6fej29] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.metric-card.utilization .metric-icon[b-dw0z6fej29] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.metric-content[b-dw0z6fej29] {
    flex-grow: 1;
}

.metric-value[b-dw0z6fej29] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 8px;
}

.metric-label[b-dw0z6fej29] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 8px;
}

.metric-trend[b-dw0z6fej29] {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.metric-trend.positive[b-dw0z6fej29] {
    color: #28a745;
}

.metric-trend.negative[b-dw0z6fej29] {
    color: #dc3545;
}

/* Compliance Metrics */
.compliance-metrics[b-dw0z6fej29] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.compliance-item[b-dw0z6fej29] {
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.compliance-header[b-dw0z6fej29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.compliance-name[b-dw0z6fej29] {
    font-weight: 600;
    color: #2c3e50;
}

.compliance-score[b-dw0z6fej29] {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 4px 12px;
    border-radius: 6px;
}

.compliance-score.bg-success[b-dw0z6fej29] {
    background-color: #d4edda !important;
    color: #155724;
}

.compliance-score.bg-warning[b-dw0z6fej29] {
    background-color: #fff3cd !important;
    color: #856404;
}

.compliance-score.bg-danger[b-dw0z6fej29] {
    background-color: #f8d7da !important;
    color: #721c24;
}

.progress[b-dw0z6fej29] {
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar[b-dw0z6fej29] {
    height: 100%;
    transition: width 0.5s ease;
}

.compliance-violations[b-dw0z6fej29] {
    font-size: 0.85rem;
    color: #856404;
}

/* Coverage Gaps */
.coverage-gaps-list[b-dw0z6fej29] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coverage-gap-item[b-dw0z6fej29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #fff5f5;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
}

.gap-date[b-dw0z6fej29] {
    font-weight: 600;
    color: #2c3e50;
}

.gap-details[b-dw0z6fej29] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Overtime Chart */
.overtime-chart[b-dw0z6fej29] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 250px;
    padding: 20px 0;
}

.overtime-week[b-dw0z6fej29] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.overtime-bar-container[b-dw0z6fej29] {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.overtime-bar[b-dw0z6fej29] {
    width: 80%;
    background: linear-gradient(180deg, #11998e 0%, #38ef7d 100%);
    border-radius: 6px 6px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.overtime-bar:hover[b-dw0z6fej29] {
    transform: scaleY(1.05);
    box-shadow: 0 -4px 12px rgba(17, 153, 142, 0.3);
}

.overtime-bar.over-target[b-dw0z6fej29] {
    background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
}

.overtime-label[b-dw0z6fej29] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

.overtime-value[b-dw0z6fej29] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 600;
}

.chart-legend[b-dw0z6fej29] {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.legend-item[b-dw0z6fej29] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color[b-dw0z6fej29] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.legend-color.normal[b-dw0z6fej29] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.legend-color.over[b-dw0z6fej29] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Shift Distribution */
.shift-distribution-grid[b-dw0z6fej29] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.shift-dist-card[b-dw0z6fej29] {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.shift-dist-header[b-dw0z6fej29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.shift-name[b-dw0z6fej29] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.05rem;
}

.shift-count[b-dw0z6fej29] {
    font-weight: 700;
    color: #0d6efd;
}

.shift-stats[b-dw0z6fej29] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #6c757d;
}

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

/* Employee Utilization Table */
.utilization-table-responsive[b-dw0z6fej29] {
    overflow-x: auto;
}

.table[b-dw0z6fej29] {
    margin-bottom: 0;
}

.table thead th[b-dw0z6fej29] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.table tbody tr[b-dw0z6fej29] {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover[b-dw0z6fej29] {
    background-color: #f8f9fa;
}

.employee-cell[b-dw0z6fej29] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.utilization-indicator[b-dw0z6fej29] {
    position: relative;
    width: 100px;
    height: 24px;
    background-color: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
}

.utilization-bar[b-dw0z6fej29] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    transition: width 0.5s ease;
}

.utilization-bar.optimal[b-dw0z6fej29] {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.utilization-bar.under-utilized[b-dw0z6fej29] {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.utilization-bar.over-utilized[b-dw0z6fej29] {
    background: linear-gradient(90deg, #ff9966 0%, #ff5e62 100%);
}

.utilization-value[b-dw0z6fej29] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Card Styles */
.card[b-dw0z6fej29] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header[b-dw0z6fej29] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
}

.card-header h5[b-dw0z6fej29] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
}

.card-body[b-dw0z6fej29] {
    padding: 20px;
}

/* Buttons */
.btn[b-dw0z6fej29] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-dw0z6fej29] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-dw0z6fej29] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

/* Loading State */
.spinner-border[b-dw0z6fej29] {
    width: 3rem;
    height: 3rem;
}

/* Alerts */
.alert[b-dw0z6fej29] {
    border-radius: 8px;
}

/* Badge Styles */
.badge[b-dw0z6fej29] {
    font-weight: 500;
    padding: 0.5em 0.75em;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .metrics-cards[b-dw0z6fej29] {
        grid-template-columns: repeat(2, 1fr);
    }

    .shift-distribution-grid[b-dw0z6fej29] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .schedule-reports-page[b-dw0z6fej29] {
        padding: 16px;
    }

    .header-actions[b-dw0z6fej29] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-dw0z6fej29] {
        width: 100%;
    }

    .overtime-chart[b-dw0z6fej29] {
        overflow-x: auto;
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .page-header[b-dw0z6fej29] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .metrics-cards[b-dw0z6fej29] {
        grid-template-columns: 1fr;
    }

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

    .shift-distribution-grid[b-dw0z6fej29] {
        grid-template-columns: 1fr;
    }

    .coverage-gap-item[b-dw0z6fej29] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .table[b-dw0z6fej29] {
        font-size: 0.85rem;
    }

    .utilization-indicator[b-dw0z6fej29] {
        width: 80px;
    }

    .report-period-selector .col-md-3[b-dw0z6fej29] {
        margin-bottom: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-dw0z6fej29 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-card[b-dw0z6fej29],
.compliance-item[b-dw0z6fej29],
.coverage-gap-item[b-dw0z6fej29],
.shift-dist-card[b-dw0z6fej29] {
    animation: fadeIn-b-dw0z6fej29 0.3s ease;
}

/* Form Controls */
.form-select[b-dw0z6fej29] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out;
}

.form-select:focus[b-dw0z6fej29] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}
/* /Components/Pages/Schedule/ShiftSwapRequests.razor.rz.scp.css */
/* Shift Swap Requests Page Styles */

.shift-swap-page[b-pcbysb1nt2] {
    animation: fadeIn-b-pcbysb1nt2 0.3s ease-in;
}

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

/* Page Header */
.shift-swap-page .page-header h2[b-pcbysb1nt2] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.shift-swap-page .page-header .text-muted[b-pcbysb1nt2] {
    font-size: 0.95rem;
}

/* Tabs */
.shift-swap-page .nav-tabs[b-pcbysb1nt2] {
    border-bottom: 2px solid #dee2e6;
}

.shift-swap-page .nav-tabs .nav-link[b-pcbysb1nt2] {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease;
}

.shift-swap-page .nav-tabs .nav-link:hover[b-pcbysb1nt2] {
    color: #495057;
    border-bottom-color: #e9ecef;
}

.shift-swap-page .nav-tabs .nav-link.active[b-pcbysb1nt2] {
    color: #6f42c1;
    border-bottom-color: #6f42c1;
    background-color: transparent;
}

.shift-swap-page .nav-tabs .badge[b-pcbysb1nt2] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Swap Request Cards */
.swap-request-card[b-pcbysb1nt2] {
    border-left: 4px solid #6f42c1;
    transition: all 0.3s ease;
    animation: cardFadeIn-b-pcbysb1nt2 0.4s ease-in-out;
}

@keyframes cardFadeIn-b-pcbysb1nt2 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.swap-request-card:hover[b-pcbysb1nt2] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.swap-request-card.border-warning[b-pcbysb1nt2] {
    border-left-color: #ffc107;
}

.swap-request-card.border-success[b-pcbysb1nt2] {
    border-left-color: #28a745;
}

.swap-request-card.border-danger[b-pcbysb1nt2] {
    border-left-color: #dc3545;
}

.swap-request-card.border-secondary[b-pcbysb1nt2] {
    border-left-color: #6c757d;
}

.swap-request-card .card-header[b-pcbysb1nt2] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e3e6f0;
    padding: 1rem 1.25rem;
}

.swap-request-card .card-body[b-pcbysb1nt2] {
    padding: 1.25rem;
}

/* Swap Details */
.swap-details[b-pcbysb1nt2] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.swap-shift[b-pcbysb1nt2] {
    padding: 0.75rem;
    background-color: white;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.swap-shift h6[b-pcbysb1nt2] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swap-shift p[b-pcbysb1nt2] {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.swap-arrow[b-pcbysb1nt2] {
    text-align: center;
    font-size: 1.5rem;
}

.swap-arrow i[b-pcbysb1nt2] {
    animation: pulse-b-pcbysb1nt2 2s ease-in-out infinite;
}

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

/* Status Badges */
.badge[b-pcbysb1nt2] {
    font-weight: 500;
    padding: 0.375rem 0.65rem;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
}

.bg-warning.text-dark[b-pcbysb1nt2] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Buttons */
.shift-swap-page .btn[b-pcbysb1nt2] {
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.shift-swap-page .btn:hover[b-pcbysb1nt2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.shift-swap-page .btn i[b-pcbysb1nt2] {
    font-size: 1rem;
}

.shift-swap-page .btn-primary[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    border: none;
}

.shift-swap-page .btn-primary:hover[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #5a32a3 0%, #8b68d4 100%);
}

.shift-swap-page .btn-success[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
}

.shift-swap-page .btn-success:hover[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
}

.shift-swap-page .btn-danger[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #dc3545 0%, #e76f7c 100%);
    border: none;
}

.shift-swap-page .btn-danger:hover[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #c82333 0%, #d15361 100%);
}

.shift-swap-page .btn-outline-danger[b-pcbysb1nt2] {
    border: 2px solid #dc3545;
    color: #dc3545;
    background-color: transparent;
}

.shift-swap-page .btn-outline-danger:hover[b-pcbysb1nt2] {
    background-color: #dc3545;
    color: white;
}

/* Alert Boxes */
.shift-swap-page .alert[b-pcbysb1nt2] {
    border-left: 4px solid;
    animation: slideIn-b-pcbysb1nt2 0.3s ease-out;
}

@keyframes slideIn-b-pcbysb1nt2 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.shift-swap-page .alert-info[b-pcbysb1nt2] {
    border-left-color: #0dcaf0;
    background-color: #e7f7fd;
}

.shift-swap-page .alert-success[b-pcbysb1nt2] {
    border-left-color: #28a745;
    background-color: #d4edda;
}

.shift-swap-page .alert-danger[b-pcbysb1nt2] {
    border-left-color: #dc3545;
    background-color: #f8d7da;
}

.shift-swap-page .alert-warning[b-pcbysb1nt2] {
    border-left-color: #ffc107;
    background-color: #fff3cd;
}

/* Table */
.shift-swap-page .table[b-pcbysb1nt2] {
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.shift-swap-page .table thead[b-pcbysb1nt2] {
    background-color: #f8f9fa;
}

.shift-swap-page .table thead th[b-pcbysb1nt2] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.shift-swap-page .table tbody tr[b-pcbysb1nt2] {
    transition: all 0.2s ease;
}

.shift-swap-page .table tbody tr:hover[b-pcbysb1nt2] {
    background-color: #f8f9fa;
}

.shift-swap-page .table tbody td[b-pcbysb1nt2] {
    vertical-align: middle;
    padding: 1rem;
}

/* Modal */
.shift-swap-page .modal-content[b-pcbysb1nt2] {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.shift-swap-page .modal-header[b-pcbysb1nt2] {
    background: linear-gradient(135deg, #6f42c1 0%, #9f7aea 100%);
    color: white;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.shift-swap-page .modal-header .btn-close[b-pcbysb1nt2] {
    filter: brightness(0) invert(1);
}

.shift-swap-page .modal-title[b-pcbysb1nt2] {
    font-weight: 600;
}

.shift-swap-page .modal-body[b-pcbysb1nt2] {
    padding: 1.5rem;
}

.shift-swap-page .modal-footer[b-pcbysb1nt2] {
    border-top: 1px solid #e3e6f0;
    padding: 1rem 1.5rem;
}

/* Form Controls */
.shift-swap-page .form-label[b-pcbysb1nt2] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.shift-swap-page .form-label .text-danger[b-pcbysb1nt2] {
    color: #dc3545;
}

.shift-swap-page .form-select[b-pcbysb1nt2],
.shift-swap-page .form-control[b-pcbysb1nt2] {
    border: 2px solid #e3e6f0;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.shift-swap-page .form-select:focus[b-pcbysb1nt2],
.shift-swap-page .form-control:focus[b-pcbysb1nt2] {
    border-color: #9f7aea;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

/* Loading State */
.shift-swap-page .spinner-border[b-pcbysb1nt2] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .shift-swap-page .page-header h2[b-pcbysb1nt2] {
        font-size: 1.5rem;
    }

    .shift-swap-page .nav-tabs .nav-link[b-pcbysb1nt2] {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    .shift-swap-page .swap-details[b-pcbysb1nt2] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .shift-swap-page .swap-arrow[b-pcbysb1nt2] {
        transform: rotate(90deg);
    }

    .shift-swap-page .btn[b-pcbysb1nt2] {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

    .shift-swap-page .card-body[b-pcbysb1nt2] {
        padding: 1rem;
    }

    .shift-swap-page .table[b-pcbysb1nt2] {
        font-size: 0.875rem;
    }

    .shift-swap-page .table tbody td[b-pcbysb1nt2] {
        padding: 0.75rem 0.5rem;
    }
}

/* Flex utility for modal action buttons */
.d-flex.gap-2[b-pcbysb1nt2] {
    gap: 0.5rem;
}

.flex-fill[b-pcbysb1nt2] {
    flex: 1 1 auto;
}

/* Small text adjustments */
.shift-swap-page small.text-muted[b-pcbysb1nt2] {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Empty state styling */
.shift-swap-page .alert i[b-pcbysb1nt2] {
    font-size: 1.125rem;
}
/* /Components/Pages/Schedule/ShiftTemplates.razor.rz.scp.css */
.shift-templates-page[b-xsfsqqcs19] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-xsfsqqcs19] {
    color: #2c3e50;
    font-weight: 600;
}

/* Stats Row */
.stats-row[b-xsfsqqcs19] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card[b-xsfsqqcs19] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

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

.stat-icon[b-xsfsqqcs19] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
}

.stat-icon.bg-primary[b-xsfsqqcs19] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.bg-success[b-xsfsqqcs19] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-icon.bg-warning[b-xsfsqqcs19] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-value[b-xsfsqqcs19] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.stat-label[b-xsfsqqcs19] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Filter Bar */
.filter-bar .card-body[b-xsfsqqcs19] {
    padding: 20px;
}

/* Templates Grid */
.templates-grid[b-xsfsqqcs19] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.template-card[b-xsfsqqcs19] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.template-card:hover[b-xsfsqqcs19] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.template-card.inactive[b-xsfsqqcs19] {
    opacity: 0.7;
}

.template-color-bar[b-xsfsqqcs19] {
    height: 6px;
    width: 100%;
}

.template-header[b-xsfsqqcs19] {
    padding: 20px 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    border-bottom: 1px solid #f0f0f0;
}

.template-title h5[b-xsfsqqcs19] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
}

.template-title .badge[b-xsfsqqcs19] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
}

.template-status .badge[b-xsfsqqcs19] {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.template-body[b-xsfsqqcs19] {
    padding: 20px;
}

/* Time Info */
.time-info[b-xsfsqqcs19] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.time-block[b-xsfsqqcs19] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.time-label[b-xsfsqqcs19] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-value[b-xsfsqqcs19] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.time-arrow[b-xsfsqqcs19] {
    color: #dee2e6;
    font-size: 1.2rem;
}

/* Template Details */
.template-details[b-xsfsqqcs19] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.detail-item[b-xsfsqqcs19] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.detail-item i[b-xsfsqqcs19] {
    width: 24px;
}

/* Timeline Preview */
.timeline-preview[b-xsfsqqcs19] {
    margin-top: 16px;
}

.timeline-bar[b-xsfsqqcs19] {
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-start[b-xsfsqqcs19], .timeline-end[b-xsfsqqcs19] {
    background: rgba(0,0,0,0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Template Footer */
.template-footer[b-xsfsqqcs19] {
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-meta[b-xsfsqqcs19] {
    font-size: 0.85rem;
}

.template-actions[b-xsfsqqcs19] {
    display: flex;
    gap: 8px;
}

.template-actions .btn[b-xsfsqqcs19] {
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Empty State */
.empty-state[b-xsfsqqcs19] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i[b-xsfsqqcs19] {
    color: #dee2e6;
}

.empty-state h5[b-xsfsqqcs19] {
    color: #6c757d;
    margin-bottom: 8px;
}

/* Modal */
.modal.show[b-xsfsqqcs19] {
    display: block;
}

.modal-backdrop.show[b-xsfsqqcs19] {
    opacity: 0.5;
}

.modal-header[b-xsfsqqcs19] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-xsfsqqcs19] {
    color: #2c3e50;
    font-weight: 600;
}

.modal-body[b-xsfsqqcs19] {
    padding: 24px;
}

.modal-footer[b-xsfsqqcs19] {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 16px 24px;
}

/* Form Elements */
.form-label[b-xsfsqqcs19] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control[b-xsfsqqcs19],
.form-select[b-xsfsqqcs19] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-xsfsqqcs19],
.form-select:focus[b-xsfsqqcs19] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

.form-control-color[b-xsfsqqcs19] {
    height: 48px;
    padding: 4px;
}

.form-check-input:checked[b-xsfsqqcs19] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Template Preview Box */
.template-preview-box[b-xsfsqqcs19] {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
}

.template-preview-box h6[b-xsfsqqcs19] {
    color: #495057;
    margin-bottom: 16px;
}

.preview-card[b-xsfsqqcs19] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.preview-header[b-xsfsqqcs19] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-times[b-xsfsqqcs19] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6c757d;
}

.preview-time[b-xsfsqqcs19],
.preview-break[b-xsfsqqcs19] {
    display: flex;
    align-items: center;
}

/* Buttons */
.btn[b-xsfsqqcs19] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-xsfsqqcs19] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-xsfsqqcs19] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:hover[b-xsfsqqcs19],
.btn-outline-secondary:hover[b-xsfsqqcs19],
.btn-outline-success:hover[b-xsfsqqcs19],
.btn-outline-warning:hover[b-xsfsqqcs19],
.btn-outline-danger:hover[b-xsfsqqcs19] {
    transform: translateY(-1px);
}

.btn i[b-xsfsqqcs19] {
    font-size: 0.9rem;
}

/* Alerts */
.alert[b-xsfsqqcs19] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success[b-xsfsqqcs19] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-danger[b-xsfsqqcs19] {
    background-color: #f8d7da;
    color: #842029;
}

/* Loading State */
.spinner-border[b-xsfsqqcs19] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .templates-grid[b-xsfsqqcs19] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 992px) {
    .shift-templates-page[b-xsfsqqcs19] {
        padding: 16px;
    }

    .stats-row[b-xsfsqqcs19] {
        grid-template-columns: 1fr;
    }

    .templates-grid[b-xsfsqqcs19] {
        grid-template-columns: 1fr;
    }

    .time-info[b-xsfsqqcs19] {
        flex-direction: column;
        align-items: stretch;
    }

    .time-arrow[b-xsfsqqcs19] {
        transform: rotate(90deg);
        margin: 8px 0;
    }
}

@media (max-width: 768px) {
    .page-header[b-xsfsqqcs19] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .page-header .btn[b-xsfsqqcs19] {
        width: 100%;
    }

    .filter-bar .row[b-xsfsqqcs19] {
        gap: 12px;
    }

    .filter-bar .col-md-4[b-xsfsqqcs19],
    .filter-bar .col-md-3[b-xsfsqqcs19],
    .filter-bar .col-md-2[b-xsfsqqcs19] {
        margin-bottom: 12px;
    }

    .template-footer[b-xsfsqqcs19] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .template-actions[b-xsfsqqcs19] {
        width: 100%;
        justify-content: space-between;
    }

    .modal-dialog[b-xsfsqqcs19] {
        margin: 8px;
    }

    .preview-times[b-xsfsqqcs19] {
        flex-direction: column;
        gap: 8px;
    }
}

/* Animations */
@keyframes fadeIn-b-xsfsqqcs19 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.template-card[b-xsfsqqcs19] {
    animation: fadeIn-b-xsfsqqcs19 0.3s ease;
}

/* Badge Styles */
.badge[b-xsfsqqcs19] {
    font-weight: 500;
    padding: 0.5em 0.75em;
}

/* Card Transitions */
.card[b-xsfsqqcs19] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.card:hover[b-xsfsqqcs19] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* /Components/Pages/Schedule/TeamCalendar.razor.rz.scp.css */
.team-calendar-page[b-v9e3tbq2x3] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header h2[b-v9e3tbq2x3] {
    color: #2c3e50;
    font-weight: 600;
}

.header-actions[b-v9e3tbq2x3] {
    display: flex;
    gap: 8px;
}

/* Toolbar */
.calendar-toolbar .card-body[b-v9e3tbq2x3] {
    padding: 20px;
}

.calendar-navigation[b-v9e3tbq2x3] {
    display: flex;
    gap: 8px;
}

.calendar-navigation .btn[b-v9e3tbq2x3] {
    flex: 1;
}

/* Calendar Header */
.calendar-header[b-v9e3tbq2x3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.calendar-header h4[b-v9e3tbq2x3] {
    margin: 0;
    font-weight: 600;
}

.coverage-summary[b-v9e3tbq2x3] {
    display: flex;
    gap: 12px;
}

.coverage-summary .badge[b-v9e3tbq2x3] {
    font-size: 0.9rem;
    padding: 8px 12px;
    font-weight: 500;
}

/* Month View */
.month-view[b-v9e3tbq2x3] {
    overflow: hidden;
}

.calendar-day-headers[b-v9e3tbq2x3] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.day-header[b-v9e3tbq2x3] {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-grid[b-v9e3tbq2x3] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #dee2e6;
}

.calendar-day[b-v9e3tbq2x3] {
    background: white;
    min-height: 120px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.calendar-day:hover[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}

.calendar-day.today[b-v9e3tbq2x3] {
    background-color: #fff3e6;
    border: 2px solid #f39c12;
}

.calendar-day.today:hover[b-v9e3tbq2x3] {
    background-color: #ffe8cc;
}

.calendar-day.other-month[b-v9e3tbq2x3] {
    background-color: #fafafa;
    opacity: 0.6;
}

.calendar-day.low-coverage[b-v9e3tbq2x3] {
    background-color: #fff5f5;
}

.day-number[b-v9e3tbq2x3] {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coverage-badge[b-v9e3tbq2x3] {
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.day-shifts[b-v9e3tbq2x3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shift-indicator[b-v9e3tbq2x3] {
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shift-employee[b-v9e3tbq2x3] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shift-time[b-v9e3tbq2x3] {
    font-size: 0.7rem;
    opacity: 0.9;
}

.more-shifts[b-v9e3tbq2x3] {
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    padding: 4px;
    font-weight: 500;
}

/* Week View */
.week-view[b-v9e3tbq2x3] {
    overflow-x: auto;
}

.week-grid[b-v9e3tbq2x3] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    min-width: 900px;
}

.time-column-header[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    border-right: 2px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
}

.week-day-header[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
    padding: 12px;
    text-align: center;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #e0e0e0;
}

.week-day-header .day-name[b-v9e3tbq2x3] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
}

.week-day-header .day-date[b-v9e3tbq2x3] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
}

.week-day-header .day-coverage[b-v9e3tbq2x3] {
    font-size: 0.75rem;
    color: #0d6efd;
    margin-top: 4px;
    font-weight: 500;
}

.time-label[b-v9e3tbq2x3] {
    padding: 8px;
    text-align: right;
    font-size: 0.75rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border-right: 2px solid #dee2e6;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 500;
}

.hour-cell[b-v9e3tbq2x3] {
    padding: 4px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hour-cell:hover[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
}

.week-shift-bar[b-v9e3tbq2x3] {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    padding: 4px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shift-label[b-v9e3tbq2x3] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day View */
.day-view .card-header[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.day-timeline[b-v9e3tbq2x3] {
    display: flex;
    flex-direction: column;
}

.timeline-hour[b-v9e3tbq2x3] {
    display: grid;
    grid-template-columns: 100px 1fr;
    min-height: 80px;
    border-bottom: 1px solid #e0e0e0;
}

.hour-marker[b-v9e3tbq2x3] {
    padding: 12px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    background-color: #f8f9fa;
    border-right: 2px solid #dee2e6;
}

.hour-content[b-v9e3tbq2x3] {
    position: relative;
    padding: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hour-content:hover[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
}

.day-shift-block[b-v9e3tbq2x3] {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 6px;
    padding: 8px;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    overflow: hidden;
}

.day-shift-block:hover[b-v9e3tbq2x3] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.shift-employee-name[b-v9e3tbq2x3] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.shift-time-range[b-v9e3tbq2x3] {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 2px;
}

.shift-template-name[b-v9e3tbq2x3] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
}

/* Legend */
.calendar-legend .card-header[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
}

.legend-items[b-v9e3tbq2x3] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-item[b-v9e3tbq2x3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color[b-v9e3tbq2x3] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Modal Styles */
.modal.show[b-v9e3tbq2x3] {
    display: block;
}

.modal-backdrop.show[b-v9e3tbq2x3] {
    opacity: 0.5;
}

.modal-header[b-v9e3tbq2x3] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.modal-title[b-v9e3tbq2x3] {
    color: #2c3e50;
    font-weight: 600;
}

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

.shift-detail-card[b-v9e3tbq2x3] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.shift-detail-header[b-v9e3tbq2x3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.employee-info[b-v9e3tbq2x3] {
    display: flex;
    align-items: center;
}

.shift-detail-body[b-v9e3tbq2x3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-row[b-v9e3tbq2x3] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.modal-summary[b-v9e3tbq2x3] {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.summary-stat[b-v9e3tbq2x3] {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

/* Buttons */
.btn[b-v9e3tbq2x3] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary[b-v9e3tbq2x3] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-v9e3tbq2x3] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:hover[b-v9e3tbq2x3],
.btn-outline-secondary:hover[b-v9e3tbq2x3] {
    transform: translateY(-1px);
}

/* Loading State */
.spinner-border[b-v9e3tbq2x3] {
    width: 3rem;
    height: 3rem;
}

/* Print Styles */
@media print {
    .page-header[b-v9e3tbq2x3],
    .calendar-toolbar[b-v9e3tbq2x3],
    .header-actions[b-v9e3tbq2x3],
    .calendar-navigation[b-v9e3tbq2x3],
    .btn[b-v9e3tbq2x3] {
        display: none !important;
    }

    .calendar-day[b-v9e3tbq2x3] {
        page-break-inside: avoid;
    }

    .team-calendar-page[b-v9e3tbq2x3] {
        padding: 0;
    }
}

/* Responsive Design */
@media (max-width: 1400px) {
    .calendar-grid[b-v9e3tbq2x3] {
        font-size: 0.85rem;
    }

    .calendar-day[b-v9e3tbq2x3] {
        min-height: 100px;
    }
}

@media (max-width: 1200px) {
    .week-grid[b-v9e3tbq2x3] {
        grid-template-columns: 70px repeat(7, 1fr);
    }

    .time-label[b-v9e3tbq2x3] {
        font-size: 0.7rem;
        padding: 6px;
    }
}

@media (max-width: 992px) {
    .team-calendar-page[b-v9e3tbq2x3] {
        padding: 16px;
    }

    .header-actions[b-v9e3tbq2x3] {
        flex-direction: column;
        width: 100%;
    }

    .header-actions .btn[b-v9e3tbq2x3] {
        width: 100%;
    }

    .calendar-toolbar .row[b-v9e3tbq2x3] {
        gap: 12px;
    }

    .calendar-toolbar .col-md-2[b-v9e3tbq2x3],
    .calendar-toolbar .col-md-3[b-v9e3tbq2x3] {
        margin-bottom: 12px;
    }

    .coverage-summary[b-v9e3tbq2x3] {
        flex-direction: column;
        gap: 8px;
    }

    .legend-items[b-v9e3tbq2x3] {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .page-header[b-v9e3tbq2x3] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .calendar-header[b-v9e3tbq2x3] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .calendar-day[b-v9e3tbq2x3] {
        min-height: 80px;
        padding: 4px;
    }

    .day-number[b-v9e3tbq2x3] {
        font-size: 0.85rem;
    }

    .shift-indicator[b-v9e3tbq2x3] {
        font-size: 0.7rem;
        padding: 2px 4px;
    }

    .week-view[b-v9e3tbq2x3],
    .day-view[b-v9e3tbq2x3] {
        font-size: 0.85rem;
    }

    .modal-dialog[b-v9e3tbq2x3] {
        margin: 8px;
    }

    .modal-summary[b-v9e3tbq2x3] {
        flex-direction: column;
        gap: 12px;
    }
}

/* Animations */
@keyframes fadeIn-b-v9e3tbq2x3 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendar-day[b-v9e3tbq2x3],
.shift-detail-card[b-v9e3tbq2x3] {
    animation: fadeIn-b-v9e3tbq2x3 0.3s ease;
}

/* Badge Styles */
.badge[b-v9e3tbq2x3] {
    font-weight: 500;
    padding: 0.5em 0.75em;
}

/* Card Transitions */
.card[b-v9e3tbq2x3] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Form Controls */
.form-select[b-v9e3tbq2x3] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out;
}

.form-select:focus[b-v9e3tbq2x3] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

/* Button Group */
.btn-group .btn-check:checked + .btn[b-v9e3tbq2x3] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}
/* /Components/Pages/Teams/Settings.razor.rz.scp.css */
/* Team Settings Page Styles - Scoped to Settings.razor */

[b-7rhdd5qw90] .team-settings-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

[b-7rhdd5qw90] .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

[b-7rhdd5qw90] .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[b-7rhdd5qw90] .back-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
}

[b-7rhdd5qw90] .back-link:hover {
    background: #e9ecef;
    color: #212529;
    transform: translateX(-2px);
}

[b-7rhdd5qw90] .page-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-7rhdd5qw90] .page-header h1 .fas {
    color: #6366f1;
    font-size: 1.75rem;
}

[b-7rhdd5qw90] .page-header p {
    margin: 0.25rem 0 0 0;
    color: #6c757d;
    font-size: 0.95rem;
}

[b-7rhdd5qw90] .settings-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

[b-7rhdd5qw90] .settings-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

[b-7rhdd5qw90] .settings-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

[b-7rhdd5qw90] .settings-card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #dee2e6;
}

[b-7rhdd5qw90] .settings-card-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-7rhdd5qw90] .settings-card-header h2 .fas {
    color: #6366f1;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

[b-7rhdd5qw90] .settings-card-body {
    padding: 2rem;
}

/* Form Styling */
[b-7rhdd5qw90] .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

[b-7rhdd5qw90] .form-control, [b-7rhdd5qw90] .form-select {
    border-radius: 8px;
    border: 2px solid #dee2e6;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

[b-7rhdd5qw90] .form-control:focus, [b-7rhdd5qw90] .form-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.15);
}

[b-7rhdd5qw90] .form-control::placeholder {
    color: #adb5bd;
}

[b-7rhdd5qw90] textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

[b-7rhdd5qw90] .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

[b-7rhdd5qw90] .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

[b-7rhdd5qw90] .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

[b-7rhdd5qw90] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(99, 102, 241, 0.4);
}

[b-7rhdd5qw90] .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-7rhdd5qw90] .btn-secondary {
    background: #e9ecef;
    color: #495057;
}

[b-7rhdd5qw90] .btn-secondary:hover {
    background: #dee2e6;
    color: #212529;
}

[b-7rhdd5qw90] .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

[b-7rhdd5qw90] .btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4);
}

/* Info Rows */
[b-7rhdd5qw90] .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

[b-7rhdd5qw90] .info-row:first-child {
    padding-top: 0;
}

[b-7rhdd5qw90] .info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

[b-7rhdd5qw90] .info-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-7rhdd5qw90] .info-label::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #6366f1;
    border-radius: 50%;
}

[b-7rhdd5qw90] .info-value {
    color: #212529;
    font-size: 0.95rem;
    font-weight: 500;
}

[b-7rhdd5qw90] .info-value a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-7rhdd5qw90] .info-value a:hover {
    color: #4f46e5;
    text-decoration: underline;
}

/* Danger Zone */
[b-7rhdd5qw90] .danger-zone {
    border: 3px solid #dc3545;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
}

[b-7rhdd5qw90] .danger-zone .settings-card-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-bottom-color: #bd2130;
}

[b-7rhdd5qw90] .danger-zone .settings-card-header h2 {
    color: white;
}

[b-7rhdd5qw90] .danger-zone .settings-card-header h2 .fas {
    color: #dc3545;
    background: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

[b-7rhdd5qw90] .danger-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #dc354520;
}

[b-7rhdd5qw90] .danger-action h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #dc3545;
}

[b-7rhdd5qw90] .danger-action p {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Alert Styling */
[b-7rhdd5qw90] .alert {
    border-radius: 12px;
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    animation: slideIn-b-7rhdd5qw90 0.3s ease;
}

@keyframes slideIn-b-7rhdd5qw90 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-7rhdd5qw90] .alert-success {
    background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
    color: #0f5132;
    border-left: 4px solid #198754;
}

[b-7rhdd5qw90] .alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
    color: #842029;
    border-left: 4px solid #dc3545;
}

[b-7rhdd5qw90] .alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    color: #664d03;
    border-left: 4px solid #ffc107;
}

/* Loading State */
[b-7rhdd5qw90] .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

[b-7rhdd5qw90] .loading p {
    color: #6c757d;
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-7rhdd5qw90] .team-settings-container {
        padding: 1rem;
    }

    [b-7rhdd5qw90] .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    [b-7rhdd5qw90] .page-header h1 {
        font-size: 1.5rem;
    }

    [b-7rhdd5qw90] .settings-card-header {
        padding: 1.25rem 1.5rem;
    }

    [b-7rhdd5qw90] .settings-card-body {
        padding: 1.5rem;
    }

    [b-7rhdd5qw90] .danger-action {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-7rhdd5qw90] .danger-action .btn {
        width: 100%;
        justify-content: center;
    }

    [b-7rhdd5qw90] .form-actions {
        flex-direction: column;
    }

    [b-7rhdd5qw90] .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    [b-7rhdd5qw90] .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/TimeOff/RequestTimeOff.razor.rz.scp.css */
/* Section 20.2: Time-Off Categories - Request Form Styling */

.timeoff-request-page[b-jd4f1njnrx] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-jd4f1njnrx] {
    margin-bottom: 2rem;
}

.page-header h1[b-jd4f1njnrx] {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

.page-header p[b-jd4f1njnrx] {
    font-size: 1.1rem;
}

.request-form-container[b-jd4f1njnrx] {
    background: #ffffff;
}

/* Card Headers with Colors */
.card-header.bg-primary[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

.card-header.bg-success[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.card-header.bg-danger[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.card-header.bg-dark[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

.card-header.bg-secondary[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}

.card-header.bg-warning[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.card-header.bg-info[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.card-header.bg-purple[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
}

.card-header h5[b-jd4f1njnrx] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Form Controls */
.form-label.fw-bold[b-jd4f1njnrx] {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-control[b-jd4f1njnrx],
.form-select[b-jd4f1njnrx] {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-control:focus[b-jd4f1njnrx],
.form-select:focus[b-jd4f1njnrx] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.form-select-lg[b-jd4f1njnrx] {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    font-weight: 500;
}

/* Partial Day Options */
.partial-day-options[b-jd4f1njnrx] {
    border-left: 4px solid #6366f1;
    animation: slideInLeft-b-jd4f1njnrx 0.3s ease-out;
}

@keyframes slideInLeft-b-jd4f1njnrx {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Category Help Text */
.alert-info small[b-jd4f1njnrx] {
    line-height: 1.5;
}

/* Card Animations */
.card[b-jd4f1njnrx] {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: fadeInUp-b-jd4f1njnrx 0.4s ease-out;
}

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

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

/* Staggered Card Animations */
.card:nth-child(1)[b-jd4f1njnrx] { animation-delay: 0s; }
.card:nth-child(2)[b-jd4f1njnrx] { animation-delay: 0.1s; }
.card:nth-child(3)[b-jd4f1njnrx] { animation-delay: 0.2s; }
.card:nth-child(4)[b-jd4f1njnrx] { animation-delay: 0.3s; }
.card:nth-child(5)[b-jd4f1njnrx] { animation-delay: 0.4s; }

/* Alerts */
.alert[b-jd4f1njnrx] {
    border-radius: 0.75rem;
    border: none;
    padding: 1rem 1.25rem;
    animation: slideInDown-b-jd4f1njnrx 0.3s ease-out;
}

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

.alert-danger[b-jd4f1njnrx] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-success[b-jd4f1njnrx] {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #10b981;
}

.alert-warning[b-jd4f1njnrx] {
    background: #fefce8;
    color: #854d0e;
    border-left: 4px solid #f59e0b;
}

.alert-info[b-jd4f1njnrx] {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

/* Buttons */
.btn[b-jd4f1njnrx] {
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
}

.btn-primary:hover[b-jd4f1njnrx] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:disabled[b-jd4f1njnrx] {
    background: #9ca3af;
    transform: none;
    box-shadow: none;
}

.btn-secondary[b-jd4f1njnrx] {
    background: #6b7280;
    border: none;
}

.btn-secondary:hover[b-jd4f1njnrx] {
    background: #4b5563;
    transform: translateY(-2px);
}

.btn-outline-primary[b-jd4f1njnrx] {
    border: 2px solid #6366f1;
    color: #6366f1;
    background: transparent;
}

.btn-outline-primary:hover[b-jd4f1njnrx] {
    background: #6366f1;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Form Check (Checkbox) */
.form-check[b-jd4f1njnrx] {
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.form-check:hover[b-jd4f1njnrx] {
    background: #f9fafb;
}

.form-check-input[b-jd4f1njnrx] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
}

.form-check-input:checked[b-jd4f1njnrx] {
    background-color: #6366f1;
    border-color: #6366f1;
}

.form-check-label[b-jd4f1njnrx] {
    margin-left: 0.5rem;
    cursor: pointer;
    user-select: none;
}

/* Select Dropdown Options (styled with emoji) */
.form-select option[b-jd4f1njnrx] {
    padding: 0.5rem;
}

/* Text Muted */
.text-muted[b-jd4f1njnrx] {
    color: #6b7280 !important;
    font-size: 0.875rem;
}

/* Required Asterisk */
.text-danger[b-jd4f1njnrx] {
    color: #ef4444 !important;
}

/* Validation Messages */
.validation-message[b-jd4f1njnrx] {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Spinner */
.spinner-border-sm[b-jd4f1njnrx] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .timeoff-request-page[b-jd4f1njnrx] {
        padding: 1rem 0.5rem;
    }

    .page-header h1[b-jd4f1njnrx] {
        font-size: 1.5rem;
    }

    .card-header h5[b-jd4f1njnrx] {
        font-size: 1rem;
    }

    .btn[b-jd4f1njnrx] {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .d-flex.justify-content-between[b-jd4f1njnrx] {
        flex-direction: column;
        gap: 1rem;
    }

    .d-flex.justify-content-between > div[b-jd4f1njnrx] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .d-flex.justify-content-between button[b-jd4f1njnrx] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .row > .col-md-6[b-jd4f1njnrx] {
        margin-bottom: 1rem;
    }
}

/* Smooth Transitions */
*[b-jd4f1njnrx] {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* /Components/Pages/Time/Delegations.razor.rz.scp.css */
/* Delegation Page Container */
.delegation-page[b-9qqkl1kzj0] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

@media (max-width: 768px) {
    .delegation-page[b-9qqkl1kzj0] {
        padding: 1rem;
    }
}

/* Page Header */
.page-header[b-9qqkl1kzj0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}

.page-header-content h1[b-9qqkl1kzj0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
}

@media (prefers-color-scheme: dark) {
    .page-header-content h1[b-9qqkl1kzj0] {
        color: #f9fafb;
    }
}

.page-header-content h1 .fas[b-9qqkl1kzj0] {
    font-size: 1.5rem;
}

.page-header-content p[b-9qqkl1kzj0] {
    margin: 0;
    font-size: 1rem;
    color: #6b7280;
}

@media (prefers-color-scheme: dark) {
    .page-header-content p[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

@media (max-width: 576px) {
    .page-header[b-9qqkl1kzj0] {
        flex-direction: column;
    }

    .page-header-actions[b-9qqkl1kzj0] {
        width: 100%;
    }

    .page-header-actions .btn[b-9qqkl1kzj0] {
        width: 100%;
    }
}

/* Tabs */
.delegation-tabs[b-9qqkl1kzj0] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    .delegation-tabs[b-9qqkl1kzj0] {
        border-bottom-color: #374151;
    }
}

.delegation-tabs .tab[b-9qqkl1kzj0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6b7280;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.delegation-tabs .tab:hover[b-9qqkl1kzj0] {
    color: #111827;
    background: #f9fafb;
}

@media (prefers-color-scheme: dark) {
    .delegation-tabs .tab[b-9qqkl1kzj0] {
        color: #9ca3af;
    }

    .delegation-tabs .tab:hover[b-9qqkl1kzj0] {
        color: #f9fafb;
        background: #1f2937;
    }
}

.delegation-tabs .tab.active[b-9qqkl1kzj0] {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .delegation-tabs .tab.active[b-9qqkl1kzj0] {
        color: #a5b4fc;
        border-bottom-color: #a5b4fc;
    }
}

.delegation-tabs .tab .badge[b-9qqkl1kzj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    .delegation-tabs .tab .badge[b-9qqkl1kzj0] {
        background: #374151;
        color: #e5e7eb;
    }
}

.delegation-tabs .tab.active .badge[b-9qqkl1kzj0] {
    background: #667eea;
    color: white;
}

/* Filters */
.delegation-filters[b-9qqkl1kzj0] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
    .delegation-filters[b-9qqkl1kzj0] {
        background: #1f2937;
    }
}

.filter-group[b-9qqkl1kzj0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label[b-9qqkl1kzj0] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .filter-group label[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

.filter-group .form-select[b-9qqkl1kzj0],
.filter-group .form-control[b-9qqkl1kzj0] {
    min-width: 150px;
}

@media (max-width: 768px) {
    .delegation-filters[b-9qqkl1kzj0] {
        flex-direction: column;
    }

    .filter-group[b-9qqkl1kzj0] {
        width: 100%;
    }

    .filter-group .form-select[b-9qqkl1kzj0],
    .filter-group .form-control[b-9qqkl1kzj0] {
        width: 100%;
        min-width: auto;
    }
}

/* Loading State */
.loading-container[b-9qqkl1kzj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.loading-container .spinner-border[b-9qqkl1kzj0] {
    width: 3rem;
    height: 3rem;
}

.loading-container p[b-9qqkl1kzj0] {
    color: #6b7280;
    font-size: 1rem;
}

@media (prefers-color-scheme: dark) {
    .loading-container p[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

/* Empty State */
.empty-state[b-9qqkl1kzj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-9qqkl1kzj0] {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1.5rem;
}

@media (prefers-color-scheme: dark) {
    .empty-icon[b-9qqkl1kzj0] {
        color: #4b5563;
    }
}

.empty-state h3[b-9qqkl1kzj0] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.75rem;
}

@media (prefers-color-scheme: dark) {
    .empty-state h3[b-9qqkl1kzj0] {
        color: #f9fafb;
    }
}

.empty-state p[b-9qqkl1kzj0] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    max-width: 500px;
}

@media (prefers-color-scheme: dark) {
    .empty-state p[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

/* Delegation Cards Grid */
.delegation-cards[b-9qqkl1kzj0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .delegation-cards[b-9qqkl1kzj0] {
        grid-template-columns: 1fr;
    }
}

/* Delegation Card */
.delegation-card[b-9qqkl1kzj0] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.delegation-card:hover[b-9qqkl1kzj0] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
    .delegation-card[b-9qqkl1kzj0] {
        background: #1f2937;
        border-color: #374151;
    }

    .delegation-card:hover[b-9qqkl1kzj0] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

/* Card Status Variants */
.delegation-card.delegation-active[b-9qqkl1kzj0] {
    border-left: 4px solid #10b981;
}

.delegation-card.delegation-scheduled[b-9qqkl1kzj0] {
    border-left: 4px solid #3b82f6;
}

.delegation-card.delegation-expired[b-9qqkl1kzj0] {
    border-left: 4px solid #9ca3af;
    opacity: 0.8;
}

.delegation-card.delegation-revoked[b-9qqkl1kzj0] {
    border-left: 4px solid #ef4444;
    opacity: 0.8;
}

/* Card Header */
.delegation-card-header[b-9qqkl1kzj0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    .delegation-card-header[b-9qqkl1kzj0] {
        border-bottom-color: #374151;
    }
}

.delegation-card-icon[b-9qqkl1kzj0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
}

.delegation-card-info[b-9qqkl1kzj0] {
    flex: 1;
    min-width: 0;
}

.delegation-card-info h4[b-9qqkl1kzj0] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
    .delegation-card-info h4[b-9qqkl1kzj0] {
        color: #f9fafb;
    }
}

.delegation-card-info p[b-9qqkl1kzj0] {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
    .delegation-card-info p[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

/* Status Badge */
.delegation-card-status[b-9qqkl1kzj0] {
    flex-shrink: 0;
}

.status-badge[b-9qqkl1kzj0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.status-badge .fas[b-9qqkl1kzj0] {
    font-size: 0.75rem;
}

.status-active[b-9qqkl1kzj0] {
    background: #d1fae5;
    color: #065f46;
}

@media (prefers-color-scheme: dark) {
    .status-active[b-9qqkl1kzj0] {
        background: #064e3b;
        color: #d1fae5;
    }
}

.status-scheduled[b-9qqkl1kzj0] {
    background: #dbeafe;
    color: #1e40af;
}

@media (prefers-color-scheme: dark) {
    .status-scheduled[b-9qqkl1kzj0] {
        background: #1e3a8a;
        color: #dbeafe;
    }
}

.status-expired[b-9qqkl1kzj0] {
    background: #f3f4f6;
    color: #374151;
}

@media (prefers-color-scheme: dark) {
    .status-expired[b-9qqkl1kzj0] {
        background: #374151;
        color: #e5e7eb;
    }
}

.status-revoked[b-9qqkl1kzj0] {
    background: #fee2e2;
    color: #991b1b;
}

@media (prefers-color-scheme: dark) {
    .status-revoked[b-9qqkl1kzj0] {
        background: #7f1d1d;
        color: #fee2e2;
    }
}

/* Card Body */
.delegation-card-body[b-9qqkl1kzj0] {
    padding: 1.25rem;
}

.delegation-detail[b-9qqkl1kzj0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.delegation-detail:last-child[b-9qqkl1kzj0] {
    border-bottom: none;
    padding-bottom: 0;
}

@media (prefers-color-scheme: dark) {
    .delegation-detail[b-9qqkl1kzj0] {
        border-bottom-color: #374151;
    }
}

.detail-icon[b-9qqkl1kzj0] {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: #667eea;
    font-size: 1rem;
}

.detail-label[b-9qqkl1kzj0] {
    flex-shrink: 0;
    font-weight: 500;
    color: #6b7280;
    min-width: 80px;
}

@media (prefers-color-scheme: dark) {
    .detail-label[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

.detail-value[b-9qqkl1kzj0] {
    flex: 1;
    color: #111827;
}

@media (prefers-color-scheme: dark) {
    .detail-value[b-9qqkl1kzj0] {
        color: #f9fafb;
    }
}

.detail-value em[b-9qqkl1kzj0] {
    font-style: italic;
    color: #6b7280;
}

@media (prefers-color-scheme: dark) {
    .detail-value em[b-9qqkl1kzj0] {
        color: #9ca3af;
    }
}

/* Card Actions */
.delegation-card-actions[b-9qqkl1kzj0] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

@media (prefers-color-scheme: dark) {
    .delegation-card-actions[b-9qqkl1kzj0] {
        border-top-color: #374151;
        background: #111827;
    }
}

.delegation-card-actions .btn[b-9qqkl1kzj0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Responsive Mobile */
@media (max-width: 576px) {
    .delegation-card-header[b-9qqkl1kzj0] {
        flex-wrap: wrap;
    }

    .delegation-card-status[b-9qqkl1kzj0] {
        flex-basis: 100%;
        margin-top: 0.5rem;
    }

    .status-badge[b-9qqkl1kzj0] {
        width: 100%;
        justify-content: center;
    }

    .delegation-detail[b-9qqkl1kzj0] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .detail-label[b-9qqkl1kzj0] {
        min-width: auto;
    }

    .delegation-card-actions[b-9qqkl1kzj0] {
        flex-direction: column;
    }

    .delegation-card-actions .btn[b-9qqkl1kzj0] {
        width: 100%;
    }
}

/* Animation */
.delegation-card[b-9qqkl1kzj0] {
    animation: fadeIn-b-9qqkl1kzj0 0.3s ease;
}

@keyframes fadeIn-b-9qqkl1kzj0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/Time/Index.razor.rz.scp.css */
/* PTO Balance Sidebar Styling (Section 4.4) */
.pto-balance-sidebar[b-6zikinpnh2] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.pto-balance-header[b-6zikinpnh2] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: #495057;
    font-size: 0.95rem;
}

.pto-balance-item[b-6zikinpnh2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 50px;
    font-size: 0.9rem;
}

.pto-balance-item:hover[b-6zikinpnh2] {
    background: #f8f9fa;
    border-color: #adb5bd;
    transform: translateY(-2px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pto-type[b-6zikinpnh2] {
    font-weight: 600;
    color: #6c757d;
}

.pto-days[b-6zikinpnh2] {
    color: #0d6efd;
    font-weight: 700;
}

/* PTO Entry Badge Styling */
.entry-card[b-6zikinpnh2] {
    transition: all 0.2s ease;
}

.entry-card:has(.badge.bg-warning)[b-6zikinpnh2] {
    border-left: 4px solid #ffc107;
}

.entry-card:has(.badge.bg-secondary:contains("Read-Only"))[b-6zikinpnh2] {
    background-color: #f8f9fa;
    opacity: 0.95;
}

/* Success/Error Alert Animation */
.alert[b-6zikinpnh2] {
    animation: slideInDown-b-6zikinpnh2 0.3s ease-out;
}

@keyframes slideInDown-b-6zikinpnh2 {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Load PTO Button Enhancement */
.btn-success:disabled[b-6zikinpnh2] {
    cursor: not-allowed;
}

.btn-success .spinner-border[b-6zikinpnh2] {
    width: 1rem;
    height: 1rem;
}

/* Responsive Design for PTO Balance */
@media (max-width: 768px) {
    .pto-balance-sidebar[b-6zikinpnh2] {
        padding: 0.75rem;
    }

    .pto-balance-item[b-6zikinpnh2] {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}
/* /Components/Pages/Time/RecurringEntries.razor.rz.scp.css */
/* Recurring Entries Page Styles */

/* Statistics Cards */
.stat-card[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover[b-5p9rv30k4k] {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.stat-card .stat-icon[b-5p9rv30k4k] {
    font-size: 2rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.stat-card .stat-info h3[b-5p9rv30k4k] {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

.stat-card .stat-info p[b-5p9rv30k4k] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Recurring Entry Cards */
.recurring-card[b-5p9rv30k4k] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.recurring-card:hover[b-5p9rv30k4k] {
    border-color: #667eea;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.recurring-card.paused[b-5p9rv30k4k] {
    opacity: 0.7;
    border-left: 4px solid #ffc107;
}

.recurring-header[b-5p9rv30k4k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e0e0e0;
}

.recurring-title h5[b-5p9rv30k4k] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recurring-badges[b-5p9rv30k4k] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.recurring-badges .badge[b-5p9rv30k4k] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.recurring-actions[b-5p9rv30k4k] {
    display: flex;
    gap: 0.5rem;
}

.recurring-actions .btn[b-5p9rv30k4k] {
    border-radius: 8px;
    transition: all 0.2s ease;
}

.recurring-actions .btn:hover[b-5p9rv30k4k] {
    transform: scale(1.05);
}

.recurring-body[b-5p9rv30k4k] {
    padding: 1.5rem;
}

.recurring-details[b-5p9rv30k4k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-item[b-5p9rv30k4k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.detail-item i[b-5p9rv30k4k] {
    width: 20px;
    text-align: center;
}

.pattern-details[b-5p9rv30k4k] {
    padding: 1rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
    border-radius: 8px;
    border-left: 4px solid #667eea;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.pattern-details strong[b-5p9rv30k4k] {
    color: #2c3e50;
    margin-right: 0.5rem;
}

.upcoming-preview[b-5p9rv30k4k] {
    padding: 1rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.upcoming-preview strong[b-5p9rv30k4k] {
    display: block;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.upcoming-dates[b-5p9rv30k4k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.upcoming-date[b-5p9rv30k4k] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: white;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #2c3e50;
    border: 1px solid #c8e6c9;
}

/* Empty State */
.empty-state[b-5p9rv30k4k] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
}

.empty-state i[b-5p9rv30k4k] {
    opacity: 0.3;
}

.empty-state h4[b-5p9rv30k4k] {
    color: #2c3e50;
    margin-top: 1rem;
}

.empty-state p[b-5p9rv30k4k] {
    font-size: 1rem;
}

/* Search and Filter */
.input-group-text[b-5p9rv30k4k] {
    background: white;
    border-right: none;
}

.input-group .form-control[b-5p9rv30k4k] {
    border-left: none;
}

.input-group .form-control:focus[b-5p9rv30k4k] {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group .form-control:focus + .input-group-text[b-5p9rv30k4k] {
    border-color: #86b7fe;
}

/* Alerts */
.alert[b-5p9rv30k4k] {
    border-radius: 8px;
    border: none;
}

.alert-success[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.alert-danger[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.alert .btn-close[b-5p9rv30k4k] {
    filter: brightness(0) invert(1);
}

/* Loading Spinner */
.spinner-border[b-5p9rv30k4k] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card[b-5p9rv30k4k] {
        margin-bottom: 1rem;
    }

    .recurring-header[b-5p9rv30k4k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .recurring-actions[b-5p9rv30k4k] {
        width: 100%;
        justify-content: flex-end;
    }

    .recurring-details[b-5p9rv30k4k] {
        grid-template-columns: 1fr;
    }

    .upcoming-dates[b-5p9rv30k4k] {
        flex-direction: column;
    }

    .upcoming-date[b-5p9rv30k4k] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .stat-card .stat-info h3[b-5p9rv30k4k] {
        font-size: 1.5rem;
    }

    .recurring-card[b-5p9rv30k4k] {
        margin-bottom: 1rem;
    }

    .recurring-badges[b-5p9rv30k4k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .recurring-actions[b-5p9rv30k4k] {
        flex-wrap: wrap;
    }

    .recurring-actions .btn[b-5p9rv30k4k] {
        flex: 1;
        min-width: 80px;
    }
}

/* Animation for new cards */
@keyframes slideInUp-b-5p9rv30k4k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recurring-card[b-5p9rv30k4k] {
    animation: slideInUp-b-5p9rv30k4k 0.3s ease-out;
}

/* Badge colors */
.badge.bg-primary[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.badge.bg-info[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

.badge.bg-success[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.badge.bg-warning[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #000 !important;
}

.badge.bg-secondary[b-5p9rv30k4k] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
}

/* Hover effects for buttons */
.btn-warning:hover[b-5p9rv30k4k] {
    background-color: #ffc107;
    border-color: #ffc107;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.btn-success:hover[b-5p9rv30k4k] {
    background-color: #28a745;
    border-color: #28a745;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-outline-primary:hover[b-5p9rv30k4k] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

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

/* Pattern Icons */
.recurring-badges .badge i[b-5p9rv30k4k] {
    margin-right: 0.25rem;
}
/* /Components/Pages/Time/Tags.razor.rz.scp.css */
/* Time Entry Tags Page Styles */

/* Statistics Cards */
.stat-card[b-f38tqdcxlz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover[b-f38tqdcxlz] {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.stat-card .stat-icon[b-f38tqdcxlz] {
    font-size: 2rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.stat-card .stat-info h3[b-f38tqdcxlz] {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

.stat-card .stat-info p[b-f38tqdcxlz] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Tag Cards */
.tag-card[b-f38tqdcxlz] {
    background: white;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #667eea;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tag-card:hover[b-f38tqdcxlz] {
    border-color: #667eea;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.tag-card.archived[b-f38tqdcxlz] {
    opacity: 0.6;
    background: #f8f9fa;
}

.tag-header[b-f38tqdcxlz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tag-badge[b-f38tqdcxlz] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tag-info[b-f38tqdcxlz] {
    flex: 1;
    min-width: 0;
}

.tag-info h6[b-f38tqdcxlz] {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-info small[b-f38tqdcxlz] {
    font-size: 0.8rem;
}

.tag-description[b-f38tqdcxlz] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tag-stats[b-f38tqdcxlz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: auto;
    margin-bottom: 0.75rem;
}

.tag-stats i[b-f38tqdcxlz] {
    color: #667eea;
}

.tag-actions[b-f38tqdcxlz] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.tag-actions .btn[b-f38tqdcxlz] {
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tag-actions .btn:hover[b-f38tqdcxlz] {
    transform: scale(1.05);
}

/* Empty State */
.empty-state[b-f38tqdcxlz] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
}

.empty-state i[b-f38tqdcxlz] {
    opacity: 0.3;
}

.empty-state h4[b-f38tqdcxlz] {
    color: #2c3e50;
    margin-top: 1rem;
}

/* Search and Filter */
.input-group-text[b-f38tqdcxlz] {
    background: white;
    border-right: none;
}

.input-group .form-control[b-f38tqdcxlz] {
    border-left: none;
}

.input-group .form-control:focus[b-f38tqdcxlz] {
    box-shadow: none;
    border-color: #ced4da;
}

/* Modal */
.modal.show[b-f38tqdcxlz] {
    background: rgba(0, 0, 0, 0.5);
}

.modal-header[b-f38tqdcxlz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
}

.modal-header .btn-close[b-f38tqdcxlz] {
    filter: brightness(0) invert(1);
}

.modal-body .form-label[b-f38tqdcxlz] {
    font-weight: 600;
    color: #2c3e50;
}

.form-control-color[b-f38tqdcxlz] {
    width: 60px;
    height: 38px;
    padding: 0.25rem;
}

/* Alerts */
.alert[b-f38tqdcxlz] {
    border-radius: 8px;
    border: none;
}

.alert-success[b-f38tqdcxlz] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.alert-danger[b-f38tqdcxlz] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.alert .btn-close[b-f38tqdcxlz] {
    filter: brightness(0) invert(1);
}

/* Loading Spinner */
.spinner-border[b-f38tqdcxlz] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card[b-f38tqdcxlz] {
        margin-bottom: 1rem;
    }

    .tag-card[b-f38tqdcxlz] {
        margin-bottom: 1rem;
    }

    .tag-actions[b-f38tqdcxlz] {
        width: 100%;
        justify-content: space-between;
    }

    .tag-actions .btn[b-f38tqdcxlz] {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .stat-card .stat-info h3[b-f38tqdcxlz] {
        font-size: 1.5rem;
    }

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

    .tag-badge[b-f38tqdcxlz] {
        align-self: flex-start;
    }
}

/* Animation */
@keyframes slideIn-b-f38tqdcxlz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tag-card[b-f38tqdcxlz] {
    animation: slideIn-b-f38tqdcxlz 0.3s ease-out;
}

/* Button Hover Effects */
.btn-outline-primary:hover[b-f38tqdcxlz] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-outline-warning:hover[b-f38tqdcxlz] {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

.btn-outline-success:hover[b-f38tqdcxlz] {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-outline-danger:hover[b-f38tqdcxlz] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}
/* /Components/Pages/Time/Templates.razor.rz.scp.css */
/* ============================================
   TIME ENTRY TEMPLATES - STYLING
   ============================================ */

/* Statistics Cards */
.stat-card[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover[b-a09vzlpzjm] {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.stat-card .stat-icon[b-a09vzlpzjm] {
    font-size: 2rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.stat-card .stat-info h3[b-a09vzlpzjm] {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

.stat-card .stat-info p[b-a09vzlpzjm] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Template Cards */
.template-card[b-a09vzlpzjm] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.template-card:hover[b-a09vzlpzjm] {
    border-color: #667eea;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    transform: translateY(-3px);
}

.template-card-used[b-a09vzlpzjm] {
    border-left: 4px solid #28a745;
}

.template-header[b-a09vzlpzjm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e0e0e0;
}

.template-type-badge[b-a09vzlpzjm] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-popular[b-a09vzlpzjm] {
    color: #ffc107;
    font-size: 1.2rem;
    animation: pulse-b-a09vzlpzjm 2s ease-in-out infinite;
}

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

.template-body[b-a09vzlpzjm] {
    padding: 1.25rem;
    flex-grow: 1;
}

.template-name[b-a09vzlpzjm] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-project[b-a09vzlpzjm],
.template-hours[b-a09vzlpzjm],
.template-description[b-a09vzlpzjm] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-project i[b-a09vzlpzjm],
.template-hours i[b-a09vzlpzjm] {
    color: #667eea;
    width: 16px;
}

.template-description[b-a09vzlpzjm] {
    font-style: italic;
    color: #95a5a6;
    border-left: 3px solid #e0e0e0;
    padding-left: 0.75rem;
    margin-top: 0.75rem;
}

.template-footer[b-a09vzlpzjm] {
    padding: 1rem;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.template-stats[b-a09vzlpzjm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.template-stats .badge[b-a09vzlpzjm] {
    font-size: 0.75rem;
}

.template-stats small[b-a09vzlpzjm] {
    font-size: 0.75rem;
}

.template-actions[b-a09vzlpzjm] {
    display: flex;
    gap: 0.5rem;
}

.template-actions .btn[b-a09vzlpzjm] {
    flex: 1;
    font-size: 0.85rem;
}

.template-actions .btn:first-child[b-a09vzlpzjm] {
    flex: 2;
}

/* Empty State */
.empty-state[b-a09vzlpzjm] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
}

.empty-state i[b-a09vzlpzjm] {
    opacity: 0.3;
}

.empty-state h4[b-a09vzlpzjm] {
    color: #2c3e50;
    margin-top: 1rem;
}

.empty-state p[b-a09vzlpzjm] {
    font-size: 1rem;
}

/* Search and Filter */
.input-group-text[b-a09vzlpzjm] {
    background: white;
    border-right: none;
}

.input-group .form-control[b-a09vzlpzjm] {
    border-left: none;
}

.input-group .form-control:focus[b-a09vzlpzjm] {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group .form-control:focus + .input-group-text[b-a09vzlpzjm] {
    border-color: #86b7fe;
}

/* Modal Styling */
.modal.show[b-a09vzlpzjm] {
    display: block;
}

.modal-content[b-a09vzlpzjm] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    border: none;
}

.modal-header .btn-close[b-a09vzlpzjm] {
    filter: brightness(0) invert(1);
}

.modal-body[b-a09vzlpzjm] {
    padding: 2rem;
}

.modal-footer[b-a09vzlpzjm] {
    border-top: 1px solid #e0e0e0;
    padding: 1rem 2rem;
}

/* Form Styling */
.form-label[b-a09vzlpzjm] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.form-control:focus[b-a09vzlpzjm],
.form-select:focus[b-a09vzlpzjm] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Alerts */
.alert[b-a09vzlpzjm] {
    border-radius: 8px;
    border: none;
}

.alert-success[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.alert-danger[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.alert .btn-close[b-a09vzlpzjm] {
    filter: brightness(0) invert(1);
}

/* Loading Spinner */
.spinner-border[b-a09vzlpzjm] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card[b-a09vzlpzjm] {
        margin-bottom: 1rem;
    }

    .template-actions[b-a09vzlpzjm] {
        flex-direction: column;
    }

    .template-actions .btn[b-a09vzlpzjm] {
        width: 100%;
    }

    .modal-dialog[b-a09vzlpzjm] {
        margin: 0.5rem;
    }

    .modal-body[b-a09vzlpzjm] {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .stat-card .stat-info h3[b-a09vzlpzjm] {
        font-size: 1.5rem;
    }

    .template-name[b-a09vzlpzjm] {
        font-size: 1rem;
    }

    .btn-sm[b-a09vzlpzjm] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Animation for new template cards */
@keyframes slideIn-b-a09vzlpzjm {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.template-card[b-a09vzlpzjm] {
    animation: slideIn-b-a09vzlpzjm 0.3s ease-out;
}

/* Badge colors */
.bg-success[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.bg-info[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

.bg-secondary[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
}

.bg-primary[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.bg-warning[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

.bg-danger[b-a09vzlpzjm] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

/* Hover effects for buttons */
.btn-success:hover[b-a09vzlpzjm] {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-outline-secondary:hover[b-a09vzlpzjm] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-outline-danger:hover[b-a09vzlpzjm] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}
/* /Components/PTO/PTODashboard.razor.rz.scp.css */
/* PTO Dashboard Styles */
.pto-dashboard[b-opmw1zivm2] {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-header[b-opmw1zivm2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dashboard-header h4[b-opmw1zivm2] {
    margin: 0;
    color: #333;
    font-weight: 600;
}

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

.balance-card[b-opmw1zivm2] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.balance-card:hover[b-opmw1zivm2] {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.balance-card.available[b-opmw1zivm2] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.balance-card.pending[b-opmw1zivm2] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.balance-card.used[b-opmw1zivm2] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.balance-card.allocation[b-opmw1zivm2] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.balance-icon[b-opmw1zivm2] {
    font-size: 2.5rem;
    opacity: 0.9;
}

.balance-info[b-opmw1zivm2] {
    flex: 1;
}

.balance-value[b-opmw1zivm2] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.balance-label[b-opmw1zivm2] {
    font-size: 0.875rem;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.accrual-info[b-opmw1zivm2] {
    padding: 1rem;
    background: #e8f4f8;
    border-left: 4px solid #17a2b8;
    border-radius: 4px;
    color: #0c5460;
}

.accrual-info i[b-opmw1zivm2] {
    margin-right: 0.5rem;
    color: #17a2b8;
}

.transaction-history h5[b-opmw1zivm2] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.transaction-used[b-opmw1zivm2] {
    background-color: #fff3cd;
}

.transaction-allocation[b-opmw1zivm2] {
    background-color: #d4edda;
}

.transaction-accrual[b-opmw1zivm2] {
    background-color: #d1ecf1;
}

.loading-spinner[b-opmw1zivm2] {
    padding: 3rem;
}

/* PTO Request Form Styles */
.modal-backdrop.show[b-opmw1zivm2] {
    opacity: 0.5;
}

.modal.show[b-opmw1zivm2] {
    display: block;
}

.modal-dialog-centered[b-opmw1zivm2] {
    min-height: calc(100% - 3.5rem);
}

/* Responsive Design */
@media (max-width: 768px) {
    .balance-cards[b-opmw1zivm2] {
        grid-template-columns: 1fr;
    }
    
    .dashboard-header[b-opmw1zivm2] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .dashboard-header button[b-opmw1zivm2] {
        width: 100%;
    }
}
/* /Components/Shared/AdvancedSearch.razor.rz.scp.css */
/* Advanced Search Styles */

.advanced-search[b-jn54dhpn8i] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-header[b-jn54dhpn8i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.search-header h5[b-jn54dhpn8i] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-bar[b-jn54dhpn8i] {
    margin-bottom: 1.5rem;
}

.search-bar .input-group-text[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.search-bar .form-control-lg[b-jn54dhpn8i] {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.search-bar .form-control-lg:focus[b-jn54dhpn8i] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.search-bar .btn-primary[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
}

/* Filter Panel */
.filter-panel[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
    animation: slideDown-b-jn54dhpn8i 0.3s ease-out;
}

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

.filter-panel .form-label[b-jn54dhpn8i] {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-panel .form-control[b-jn54dhpn8i],
.filter-panel .form-select[b-jn54dhpn8i] {
    border-radius: 6px;
}

.quick-dates[b-jn54dhpn8i] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.quick-dates .btn[b-jn54dhpn8i] {
    border-radius: 20px;
    font-size: 0.85rem;
}

.filter-actions[b-jn54dhpn8i] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.filter-actions .btn[b-jn54dhpn8i] {
    border-radius: 8px;
    font-weight: 600;
}

/* Results Summary */
.results-summary[b-jn54dhpn8i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.summary-info[b-jn54dhpn8i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c3e50;
}

.summary-info strong[b-jn54dhpn8i] {
    color: #667eea;
    font-size: 1.1rem;
}

.summary-actions[b-jn54dhpn8i] {
    display: flex;
    gap: 0.75rem;
}

/* Results Grid */
.results-grid[b-jn54dhpn8i] {
    margin-top: 1rem;
}

.results-grid table[b-jn54dhpn8i] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.results-grid thead[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.results-grid thead th[b-jn54dhpn8i] {
    padding: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.results-grid thead th:hover[b-jn54dhpn8i] {
    background: rgba(255, 255, 255, 0.1);
}

.results-grid thead th i[b-jn54dhpn8i] {
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

.results-grid tbody tr[b-jn54dhpn8i] {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.results-grid tbody tr:hover[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(5px);
}

.results-grid tbody td[b-jn54dhpn8i] {
    padding: 1rem;
    vertical-align: middle;
}

.entry-description[b-jn54dhpn8i] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-grid .badge[b-jn54dhpn8i] {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.results-grid .btn-group-sm .btn[b-jn54dhpn8i] {
    border-radius: 6px;
}

/* Empty Results */
.empty-results[b-jn54dhpn8i] {
    text-align: center;
    padding: 4rem 2rem;
    color: #6c757d;
}

.empty-results i[b-jn54dhpn8i] {
    opacity: 0.3;
}

/* Pagination */
.pagination[b-jn54dhpn8i] {
    margin-top: 1.5rem;
}

.pagination .page-link[b-jn54dhpn8i] {
    border-radius: 6px;
    margin: 0 0.25rem;
    color: #667eea;
    border: 1px solid #dee2e6;
}

.pagination .page-link:hover[b-jn54dhpn8i] {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.pagination .page-item.active .page-link[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .search-header[b-jn54dhpn8i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .filter-panel .row[b-jn54dhpn8i] {
        margin: 0;
    }

    .filter-panel .col-md-3[b-jn54dhpn8i],
    .filter-panel .col-md-6[b-jn54dhpn8i] {
        padding: 0;
        margin-bottom: 1rem;
    }

    .filter-actions[b-jn54dhpn8i] {
        flex-direction: column;
    }

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

    .results-summary[b-jn54dhpn8i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .summary-actions[b-jn54dhpn8i] {
        width: 100%;
    }

    .summary-actions .form-select[b-jn54dhpn8i] {
        width: 100% !important;
    }

    .results-grid[b-jn54dhpn8i] {
        overflow-x: auto;
    }

    .results-grid table[b-jn54dhpn8i] {
        min-width: 800px;
    }

    .entry-description[b-jn54dhpn8i] {
        max-width: 150px;
    }
}

@media (max-width: 576px) {
    .advanced-search[b-jn54dhpn8i] {
        padding: 1rem;
    }

    .search-bar .form-control-lg[b-jn54dhpn8i] {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .search-bar .btn-primary[b-jn54dhpn8i] {
        padding: 0.5rem 1rem;
    }

    .quick-dates[b-jn54dhpn8i] {
        flex-direction: column;
    }

    .quick-dates .btn[b-jn54dhpn8i] {
        width: 100%;
    }

    .results-grid table[b-jn54dhpn8i] {
        font-size: 0.85rem;
    }

    .results-grid thead th[b-jn54dhpn8i],
    .results-grid tbody td[b-jn54dhpn8i] {
        padding: 0.5rem;
    }

    .pagination[b-jn54dhpn8i] {
        flex-wrap: wrap;
    }
}

/* Loading State */
.spinner-border[b-jn54dhpn8i] {
    width: 3rem;
    height: 3rem;
}

/* Table Secondary (Deleted Rows) */
.table-secondary[b-jn54dhpn8i] {
    opacity: 0.6;
}

.table-secondary td[b-jn54dhpn8i] {
    text-decoration: line-through;
}

/* Animations */
@keyframes fadeIn-b-jn54dhpn8i {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.results-grid tbody tr[b-jn54dhpn8i] {
    animation: fadeIn-b-jn54dhpn8i 0.3s ease-out;
}

/* Focus States */
.form-control:focus[b-jn54dhpn8i],
.form-select:focus[b-jn54dhpn8i] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Button Hover Effects */
.btn-primary:hover[b-jn54dhpn8i] {
    background: linear-gradient(135deg, #5568d3 0%, #66428b 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-secondary:hover[b-jn54dhpn8i] {
    background: #6c757d;
    color: white;
}

.btn-outline-info:hover[b-jn54dhpn8i] {
    background: #17a2b8;
    color: white;
}
/* /Components/Shared/AdvancedSearchPanel.razor.rz.scp.css */
.advanced-search-panel[b-lha1vzu8rl] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.advanced-search-panel.expanded[b-lha1vzu8rl] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.search-header[b-lha1vzu8rl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background: white;
    border-bottom: 1px solid #dee2e6;
}

.search-header h5[b-lha1vzu8rl] {
    margin: 0;
    font-weight: 600;
    color: #495057;
}

.search-header h5 i[b-lha1vzu8rl] {
    color: #6c757d;
}

.search-body[b-lha1vzu8rl] {
    padding: 1.5rem;
    background: white;
    animation: slideDown-b-lha1vzu8rl 0.3s ease;
}

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

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

.search-actions .btn[b-lha1vzu8rl] {
    flex: 0 0 auto;
}

/* Active Filters Display */
.active-filters[b-lha1vzu8rl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.filter-label[b-lha1vzu8rl] {
    font-weight: 600;
    color: #495057;
    margin-right: 0.5rem;
}

.filter-tag[b-lha1vzu8rl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
    animation: fadeIn-b-lha1vzu8rl 0.2s ease;
}

@keyframes fadeIn-b-lha1vzu8rl {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.btn-close-tag[b-lha1vzu8rl] {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.btn-close-tag:hover[b-lha1vzu8rl] {
    opacity: 1;
}

/* Custom Date Range Inputs */
input[type="date"].form-control[b-lha1vzu8rl] {
    cursor: pointer;
}

input[type="number"].form-control[b-lha1vzu8rl] {
    text-align: right;
}

/* Button Group for Entry Type */
.btn-group[b-lha1vzu8rl] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.btn-group .btn-outline-primary[b-lha1vzu8rl],
.btn-group .btn-outline-secondary[b-lha1vzu8rl] {
    border-color: #dee2e6;
}

.btn-check:checked + .btn-outline-primary[b-lha1vzu8rl] {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-color: #0d6efd;
}

.btn-check:checked + .btn-outline-secondary[b-lha1vzu8rl] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    border-color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-actions[b-lha1vzu8rl] {
        flex-direction: column;
    }

    .search-actions .btn[b-lha1vzu8rl] {
        width: 100%;
    }

    .filter-tag[b-lha1vzu8rl] {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/Shared/CreateDelegationModal.razor.rz.scp.css */
/* Modal Customizations for Delegation */
.modal-header .modal-title[b-q4wkvsif2z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.modal-header .modal-title .fas[b-q4wkvsif2z] {
    font-size: 1.25rem;
}

/* Delegation Info Box */
.delegation-info-box[b-q4wkvsif2z] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left: 4px solid #667eea;
    border-radius: 8px;
    margin-top: 1rem;
}

@media (prefers-color-scheme: dark) {
    .delegation-info-box[b-q4wkvsif2z] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    }
}

.delegation-info-icon[b-q4wkvsif2z] {
    display: flex;
    align-items: flex-start;
    font-size: 1.5rem;
    color: #667eea;
}

.delegation-info-content[b-q4wkvsif2z] {
    flex: 1;
}

.delegation-info-content strong[b-q4wkvsif2z] {
    display: block;
    margin-bottom: 0.5rem;
    color: #111827;
    font-size: 0.9375rem;
}

@media (prefers-color-scheme: dark) {
    .delegation-info-content strong[b-q4wkvsif2z] {
        color: #f9fafb;
    }
}

.delegation-info-content ul[b-q4wkvsif2z] {
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
    .delegation-info-content ul[b-q4wkvsif2z] {
        color: #9ca3af;
    }
}

.delegation-info-content ul li[b-q4wkvsif2z] {
    margin-bottom: 0.25rem;
}

/* Form Enhancements */
.form-label[b-q4wkvsif2z] {
    font-weight: 500;
    color: #374151;
}

@media (prefers-color-scheme: dark) {
    .form-label[b-q4wkvsif2z] {
        color: #d1d5db;
    }
}

.form-label small[b-q4wkvsif2z] {
    font-weight: 400;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.form-label .text-danger[b-q4wkvsif2z] {
    font-weight: 600;
}

/* Enhanced Alert Styles */
.alert-info[b-q4wkvsif2z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

@media (prefers-color-scheme: dark) {
    .alert-info[b-q4wkvsif2z] {
        background: #1e3a8a;
        border-color: #3b82f6;
        color: #dbeafe;
    }
}

.alert-info .fas[b-q4wkvsif2z] {
    font-size: 1.125rem;
}

.alert-danger[b-q4wkvsif2z] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-danger .fas[b-q4wkvsif2z] {
    flex-shrink: 0;
    margin-top: 0.125rem;
    font-size: 1.125rem;
}

/* Textarea Character Count */
.form-control + small.text-muted[b-q4wkvsif2z] {
    display: block;
    text-align: right;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

/* Modal Footer Buttons */
.modal-footer .btn[b-q4wkvsif2z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

.modal-footer .btn .spinner-border-sm[b-q4wkvsif2z] {
    width: 1rem;
    height: 1rem;
}

/* Disabled State */
.form-control:disabled[b-q4wkvsif2z],
.form-select:disabled[b-q4wkvsif2z] {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
    .form-control:disabled[b-q4wkvsif2z],
    .form-select:disabled[b-q4wkvsif2z] {
        background-color: #1f2937;
        color: #6b7280;
    }
}

/* Select Dropdown Styling */
.form-select[b-q4wkvsif2z] {
    cursor: pointer;
}

.form-select option[b-q4wkvsif2z] {
    padding: 0.5rem;
}

/* Validation Feedback */
.invalid-feedback[b-q4wkvsif2z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.invalid-feedback[b-q4wkvsif2z]::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Date Input Styling */
input[type="date"][b-q4wkvsif2z] {
    cursor: pointer;
}

input[type="date"][b-q4wkvsif2z]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: opacity(0.6);
}

input[type="date"]:hover[b-q4wkvsif2z]::-webkit-calendar-picker-indicator {
    filter: opacity(1);
}

@media (prefers-color-scheme: dark) {
    input[type="date"][b-q4wkvsif2z]::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(0.6);
    }

    input[type="date"]:hover[b-q4wkvsif2z]::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(1);
    }
}

/* Responsive Design */
@media (max-width: 576px) {
    .modal-dialog[b-q4wkvsif2z] {
        margin: 0.5rem;
    }

    .delegation-info-box[b-q4wkvsif2z] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .delegation-info-icon[b-q4wkvsif2z] {
        font-size: 1.25rem;
    }

    .row.mb-3[b-q4wkvsif2z] {
        margin-bottom: 1rem !important;
    }

    .row.mb-3 .col-md-6:first-child[b-q4wkvsif2z] {
        margin-bottom: 1rem;
    }
}
/* /Components/Shared/DelegateIndicator.razor.rz.scp.css */
/* Delegate Indicator Container */
.delegate-indicator-container[b-uq7n7g22m4] {
    position: relative;
    display: inline-block;
}

/* Delegate Indicator Button */
.delegate-indicator-btn[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.delegate-indicator-btn:hover[b-uq7n7g22m4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.delegate-indicator-btn:active[b-uq7n7g22m4] {
    transform: translateY(0);
}

.delegate-indicator-btn .fas[b-uq7n7g22m4] {
    font-size: 1rem;
}

.delegate-text[b-uq7n7g22m4] {
    font-weight: 600;
}

.delegate-badge[b-uq7n7g22m4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Delegate Dropdown */
.delegate-dropdown[b-uq7n7g22m4] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 400px;
    max-height: 600px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.delegate-dropdown.show[b-uq7n7g22m4] {
    display: flex;
    animation: slideDown-b-uq7n7g22m4 0.2s ease;
}

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

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .delegate-dropdown[b-uq7n7g22m4] {
        background: #1e1e1e;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* Delegate Header */
.delegate-header[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    .delegate-header[b-uq7n7g22m4] {
        border-bottom-color: #374151;
    }
}

.delegate-header h3[b-uq7n7g22m4] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

@media (prefers-color-scheme: dark) {
    .delegate-header h3[b-uq7n7g22m4] {
        color: #f9fafb;
    }
}

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

.btn-icon:hover[b-uq7n7g22m4] {
    background: #f3f4f6;
    color: #111827;
}

@media (prefers-color-scheme: dark) {
    .btn-icon[b-uq7n7g22m4] {
        color: #9ca3af;
    }

    .btn-icon:hover[b-uq7n7g22m4] {
        background: #374151;
        color: #f9fafb;
    }
}

/* Info Banner */
.delegate-info-banner[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #6366f1;
}

@media (prefers-color-scheme: dark) {
    .delegate-info-banner[b-uq7n7g22m4] {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        border-bottom-color: #374151;
        color: #a5b4fc;
    }
}

.delegate-info-banner .fas[b-uq7n7g22m4] {
    font-size: 1rem;
}

/* Delegate List */
.delegate-list[b-uq7n7g22m4] {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

/* Delegate Item */
.delegate-item[b-uq7n7g22m4] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

.delegate-item:last-child[b-uq7n7g22m4] {
    border-bottom: none;
}

.delegate-item:hover[b-uq7n7g22m4] {
    background: #f9fafb;
}

@media (prefers-color-scheme: dark) {
    .delegate-item[b-uq7n7g22m4] {
        border-bottom-color: #374151;
    }

    .delegate-item:hover[b-uq7n7g22m4] {
        background: #1f2937;
    }
}

/* Delegate Item Icon */
.delegate-item-icon[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
}

/* Delegate Item Content */
.delegate-item-content[b-uq7n7g22m4] {
    flex: 1;
    min-width: 0;
}

.delegate-item-header[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.delegate-item-header strong[b-uq7n7g22m4] {
    font-size: 0.9375rem;
    color: #111827;
}

@media (prefers-color-scheme: dark) {
    .delegate-item-header strong[b-uq7n7g22m4] {
        color: #f9fafb;
    }
}

.badge[b-uq7n7g22m4] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.badge-warning[b-uq7n7g22m4] {
    background: #fef3c7;
    color: #92400e;
}

@media (prefers-color-scheme: dark) {
    .badge-warning[b-uq7n7g22m4] {
        background: #78350f;
        color: #fef3c7;
    }
}

/* Delegate Item Details */
.delegate-item-details[b-uq7n7g22m4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

@media (prefers-color-scheme: dark) {
    .delegate-item-details[b-uq7n7g22m4] {
        color: #9ca3af;
    }
}

.delegate-date-range[b-uq7n7g22m4],
.delegate-days-remaining[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.delegate-date-range .fas[b-uq7n7g22m4] {
    font-size: 0.75rem;
}

/* Delegate Item Reason */
.delegate-item-reason[b-uq7n7g22m4] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f3f4f6;
    border-left: 3px solid #667eea;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: #6b7280;
}

@media (prefers-color-scheme: dark) {
    .delegate-item-reason[b-uq7n7g22m4] {
        background: #374151;
        color: #9ca3af;
    }
}

.delegate-item-reason em[b-uq7n7g22m4] {
    font-style: italic;
}

/* Delegate Footer */
.delegate-footer[b-uq7n7g22m4] {
    display: flex;
    justify-content: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    .delegate-footer[b-uq7n7g22m4] {
        border-top-color: #374151;
    }
}

.delegate-footer .btn[b-uq7n7g22m4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .delegate-dropdown[b-uq7n7g22m4] {
        width: 100vw;
        max-width: 400px;
        right: -1rem;
    }

    .delegate-text[b-uq7n7g22m4] {
        display: none;
    }

    .delegate-indicator-btn[b-uq7n7g22m4] {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .delegate-dropdown[b-uq7n7g22m4] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 12px 12px 0 0;
    }
}

/* Scrollbar Styling */
.delegate-list[b-uq7n7g22m4]::-webkit-scrollbar {
    width: 6px;
}

.delegate-list[b-uq7n7g22m4]::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.delegate-list[b-uq7n7g22m4]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.delegate-list[b-uq7n7g22m4]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

@media (prefers-color-scheme: dark) {
    .delegate-list[b-uq7n7g22m4]::-webkit-scrollbar-track {
        background: #1f2937;
    }

    .delegate-list[b-uq7n7g22m4]::-webkit-scrollbar-thumb {
        background: #4b5563;
    }

    .delegate-list[b-uq7n7g22m4]::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }
}
/* /Components/Shared/EditDelegationModal.razor.rz.scp.css */
/* Delegation Info Read-Only Section */
.delegation-info-readonly[b-yieqn60r9x] {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    .delegation-info-readonly[b-yieqn60r9x] {
        background: #1f2937;
        border-color: #374151;
    }
}

.delegation-info-readonly .form-label[b-yieqn60r9x] {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.readonly-value[b-yieqn60r9x] {
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
    color: #111827;
    margin-bottom: 0.25rem;
}

@media (prefers-color-scheme: dark) {
    .readonly-value[b-yieqn60r9x] {
        color: #f9fafb;
    }
}

.readonly-value strong[b-yieqn60r9x] {
    font-weight: 600;
}

.readonly-value .fas[b-yieqn60r9x] {
    color: #667eea;
}

/* Change Summary Box */
.change-summary[b-yieqn60r9x] {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
    .change-summary[b-yieqn60r9x] {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    }
}

.change-summary-header[b-yieqn60r9x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #92400e;
    font-size: 0.9375rem;
}

@media (prefers-color-scheme: dark) {
    .change-summary-header[b-yieqn60r9x] {
        color: #fbbf24;
    }
}

.change-summary-header .fas[b-yieqn60r9x] {
    font-size: 1rem;
}

.change-list[b-yieqn60r9x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.change-list li[b-yieqn60r9x] {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.change-list li:last-child[b-yieqn60r9x] {
    border-bottom: none;
    padding-bottom: 0;
}

@media (prefers-color-scheme: dark) {
    .change-list li[b-yieqn60r9x] {
        color: #d1d5db;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}

.old-value[b-yieqn60r9x] {
    color: #dc2626;
    text-decoration: line-through;
    font-weight: 500;
}

.new-value[b-yieqn60r9x] {
    color: #059669;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .old-value[b-yieqn60r9x] {
        color: #f87171;
    }

    .new-value[b-yieqn60r9x] {
        color: #34d399;
    }
}

/* Status Alerts */
.alert[b-yieqn60r9x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert .fas[b-yieqn60r9x] {
    font-size: 1.125rem;
}

.alert strong[b-yieqn60r9x] {
    font-weight: 600;
}

/* Alert Variants */
.alert-success[b-yieqn60r9x] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

@media (prefers-color-scheme: dark) {
    .alert-success[b-yieqn60r9x] {
        background: #064e3b;
        border-color: #059669;
        color: #d1fae5;
    }
}

.alert-info[b-yieqn60r9x] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

@media (prefers-color-scheme: dark) {
    .alert-info[b-yieqn60r9x] {
        background: #1e3a8a;
        border-color: #3b82f6;
        color: #dbeafe;
    }
}

.alert-warning[b-yieqn60r9x] {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

@media (prefers-color-scheme: dark) {
    .alert-warning[b-yieqn60r9x] {
        background: #78350f;
        border-color: #f59e0b;
        color: #fef3c7;
    }
}

.alert-secondary[b-yieqn60r9x] {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

@media (prefers-color-scheme: dark) {
    .alert-secondary[b-yieqn60r9x] {
        background: #374151;
        border-color: #6b7280;
        color: #e5e7eb;
    }
}

/* Duration Comparison */
.alert .ms-2[b-yieqn60r9x] {
    font-size: 0.875rem;
    font-weight: 400;
}

.alert .text-danger[b-yieqn60r9x] {
    font-weight: 600;
}

/* Disabled Save Button */
.modal-footer .btn:disabled[b-yieqn60r9x] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form Enhancements */
.form-label small[b-yieqn60r9x] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 576px) {
    .delegation-info-readonly .row .col-md-6:first-child[b-yieqn60r9x] {
        margin-bottom: 1rem;
    }

    .change-summary[b-yieqn60r9x] {
        padding: 0.75rem;
    }

    .change-summary-header[b-yieqn60r9x] {
        font-size: 0.875rem;
    }

    .change-list li[b-yieqn60r9x] {
        font-size: 0.8125rem;
    }
}

/* Animation for change summary */
.change-summary[b-yieqn60r9x] {
    animation: slideIn-b-yieqn60r9x 0.3s ease;
}

@keyframes slideIn-b-yieqn60r9x {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/FMLAEligibilityWidget.razor.rz.scp.css */
/* FMLA Eligibility Widget - Section 20.3 */

.fmla-eligibility-widget[b-u564q188hd] {
    margin-bottom: 1.5rem;
}

.fmla-eligibility-widget .card[b-u564q188hd] {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.fmla-eligibility-widget .card:hover[b-u564q188hd] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fmla-eligibility-widget .card-header[b-u564q188hd] {
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.fmla-eligibility-widget .card-body[b-u564q188hd] {
    padding: 1.25rem;
}

/* Eligibility Status Badge */
.eligibility-status[b-u564q188hd] {
    text-align: center;
}

.status-badge[b-u564q188hd] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.status-badge-eligible[b-u564q188hd] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
}

.status-badge-not-eligible[b-u564q188hd] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
}

.status-badge-pending[b-u564q188hd] {
    background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
    border: 2px solid #6c757d;
}

.status-icon[b-u564q188hd] {
    font-size: 2.5rem;
}

.status-badge-eligible .status-icon[b-u564q188hd] {
    color: #28a745;
}

.status-badge-not-eligible .status-icon[b-u564q188hd] {
    color: #ffc107;
}

.status-badge-pending .status-icon[b-u564q188hd] {
    color: #6c757d;
}

.status-text[b-u564q188hd] {
    text-align: left;
}

.status-title[b-u564q188hd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.status-subtitle[b-u564q188hd] {
    font-size: 0.875rem;
    color: #666;
}

/* FMLA Usage Bar */
.fmla-usage[b-u564q188hd] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.usage-bar-container[b-u564q188hd] {
    margin-top: 0.5rem;
}

.usage-bar[b-u564q188hd] {
    width: 100%;
    height: 24px;
    background: #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.usage-bar-fill[b-u564q188hd] {
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transition: width 0.6s ease;
}

.usage-bar-fill[style*="width: 80%"][b-u564q188hd],
.usage-bar-fill[style*="width: 9"][b-u564q188hd],
.usage-bar-fill[style*="width: 10"][b-u564q188hd] {
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
}

.usage-text[b-u564q188hd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.hours-used[b-u564q188hd] {
    font-weight: 600;
    color: #495057;
}

.hours-remaining[b-u564q188hd] {
    color: #6c757d;
}

/* Certification Status */
.certification-status[b-u564q188hd] {
}

.cert-info[b-u564q188hd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cert-item[b-u564q188hd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cert-label[b-u564q188hd] {
    font-weight: 500;
    color: #6c757d;
    min-width: 70px;
}

.cert-value[b-u564q188hd] {
    font-weight: 500;
    color: #495057;
}

/* Requirements Breakdown */
.requirements-breakdown[b-u564q188hd] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.requirement-item[b-u564q188hd] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    border: 1px solid #e9ecef;
}

.requirement-item:last-child[b-u564q188hd] {
    margin-bottom: 0;
}

.requirement-icon[b-u564q188hd] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.requirement-details[b-u564q188hd] {
    flex: 1;
}

.requirement-title[b-u564q188hd] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.requirement-value[b-u564q188hd] {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Hire Date Info */
.hire-date-info[b-u564q188hd] {
    text-align: center;
}

.hire-date-info strong[b-u564q188hd] {
    color: #495057;
}

/* Alert Customization */
.alert-sm[b-u564q188hd] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.alert-sm i[b-u564q188hd] {
    font-size: 1rem;
    vertical-align: middle;
}

/* Responsive Design */
@media (max-width: 768px) {
    .status-badge[b-u564q188hd] {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .status-text[b-u564q188hd] {
        text-align: center;
    }

    .status-icon[b-u564q188hd] {
        font-size: 2rem;
    }

    .status-title[b-u564q188hd] {
        font-size: 1.1rem;
    }

    .usage-text[b-u564q188hd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .cert-item[b-u564q188hd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .cert-label[b-u564q188hd] {
        min-width: auto;
    }
}

/* Animation */
@keyframes fadeIn-b-u564q188hd {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fmla-eligibility-widget .card-body > *[b-u564q188hd] {
    animation: fadeIn-b-u564q188hd 0.4s ease;
}
/* /Components/Shared/OvertimeWarningModal.razor.rz.scp.css */
.modal-backdrop[b-og12jcdqxq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

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

.modal-content[b-og12jcdqxq] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.modal-header[b-og12jcdqxq] {
    padding: 1.5rem;
    border-radius: 12px 12px 0 0;
    border: none;
    color: white;
}

.modal-header.bg-warning[b-og12jcdqxq] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.modal-header.bg-danger[b-og12jcdqxq] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.modal-title[b-og12jcdqxq] {
    font-weight: 600;
    margin: 0;
}

.modal-title i[b-og12jcdqxq] {
    margin-right: 0.75rem;
}

.btn-close-white[b-og12jcdqxq] {
    filter: brightness(0) invert(1);
}

.modal-body[b-og12jcdqxq] {
    padding: 1.5rem;
}

.alert[b-og12jcdqxq] {
    border-radius: 8px;
    border-left: 4px solid;
    padding: 1rem 1.25rem;
}

.alert-warning[b-og12jcdqxq] {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.alert-danger[b-og12jcdqxq] {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.week-summary[b-og12jcdqxq] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid #e9ecef;
}

.week-summary h6[b-og12jcdqxq] {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
}

.week-summary h6 i[b-og12jcdqxq] {
    color: #667eea;
    margin-right: 0.5rem;
}

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

.summary-item.highlight[b-og12jcdqxq] {
    border-left: 4px solid #ffc107;
    background: #fffbf0;
}

.summary-item.highlight-danger[b-og12jcdqxq] {
    border-left: 4px solid #dc3545;
    background: #fff5f5;
}

.summary-label[b-og12jcdqxq] {
    font-weight: 500;
    color: #6c757d;
}

.summary-value[b-og12jcdqxq] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #2c3e50;
}

.approval-section[b-og12jcdqxq] {
    background: #fffbf0;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid #ffc107;
}

.approval-section .alert[b-og12jcdqxq] {
    margin-bottom: 0;
}

.approval-section .alert i[b-og12jcdqxq] {
    margin-right: 0.5rem;
}

.approval-section .form-label[b-og12jcdqxq] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.approval-section textarea[b-og12jcdqxq] {
    border: 2px solid #ffc107;
    border-radius: 6px;
}

.approval-section textarea:focus[b-og12jcdqxq] {
    border-color: #ff9800;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.tips-section[b-og12jcdqxq] {
    background: #e7f3ff;
    padding: 1.25rem;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.tips-section h6[b-og12jcdqxq] {
    color: #004085;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.tips-list[b-og12jcdqxq] {
    margin: 0;
    padding-left: 1.5rem;
    color: #004085;
}

.tips-list li[b-og12jcdqxq] {
    margin-bottom: 0.5rem;
}

.modal-footer[b-og12jcdqxq] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn[b-og12jcdqxq] {
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn i[b-og12jcdqxq] {
    margin-right: 0.5rem;
}

.btn-primary[b-og12jcdqxq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-og12jcdqxq] {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-og12jcdqxq] {
    background: #6c757d;
    border: none;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-og12jcdqxq] {
    background: #5a6268;
    transform: translateY(-2px);
}

.btn-warning[b-og12jcdqxq] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border: none;
    color: #333;
    font-weight: 600;
}

.btn-warning:hover:not(:disabled)[b-og12jcdqxq] {
    background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

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

.spinner-border-sm[b-og12jcdqxq] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

.text-warning[b-og12jcdqxq] {
    color: #ffc107 !important;
}

.text-danger[b-og12jcdqxq] {
    color: #dc3545 !important;
}

@media (max-width: 768px) {
    .modal-dialog[b-og12jcdqxq] {
        margin: 0.5rem;
    }

    .summary-item[b-og12jcdqxq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .modal-footer[b-og12jcdqxq] {
        flex-direction: column;
    }

    .modal-footer .btn[b-og12jcdqxq] {
        width: 100%;
    }
}
/* /Components/Shared/RecurringNotifications.razor.rz.scp.css */
/* Recurring Notifications Styles */

.recurring-notifications[b-1tiydcyt88] {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1000;
}

.notification-badge[b-1tiydcyt88] {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    animation: pulse-b-1tiydcyt88 2s infinite;
}

.notification-badge:hover[b-1tiydcyt88] {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.notification-badge i[b-1tiydcyt88] {
    font-size: 1.5rem;
}

.badge-count[b-1tiydcyt88] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 2px solid white;
    animation: bounce-b-1tiydcyt88 1s infinite;
}

@keyframes pulse-b-1tiydcyt88 {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.7);
    }
}

@keyframes bounce-b-1tiydcyt88 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.notification-panel[b-1tiydcyt88] {
    position: absolute;
    top: 60px;
    right: 0;
    width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-1tiydcyt88 0.3s ease-out;
}

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

.panel-header[b-1tiydcyt88] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px 12px 0 0;
}

.panel-header h6[b-1tiydcyt88] {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header .btn-close[b-1tiydcyt88] {
    opacity: 0.5;
}

.panel-header .btn-close:hover[b-1tiydcyt88] {
    opacity: 1;
}

.panel-body[b-1tiydcyt88] {
    padding: 1.25rem;
    max-height: 500px;
    overflow-y: auto;
}

.panel-body p[b-1tiydcyt88] {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.entries-list[b-1tiydcyt88] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.entry-item[b-1tiydcyt88] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border-left: 4px solid #667eea;
    transition: all 0.2s ease;
}

.entry-item:hover[b-1tiydcyt88] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateX(5px);
}

.entry-info[b-1tiydcyt88] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.entry-info strong[b-1tiydcyt88] {
    color: #2c3e50;
    font-size: 0.95rem;
}

.entry-info small[b-1tiydcyt88] {
    font-size: 0.8rem;
}

.entry-actions[b-1tiydcyt88] {
    display: flex;
    gap: 0.5rem;
}

.entry-actions .btn[b-1tiydcyt88] {
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    transition: all 0.2s ease;
}

.entry-actions .btn:hover[b-1tiydcyt88] {
    transform: scale(1.05);
}

.entry-actions .btn-success[b-1tiydcyt88] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
}

.entry-actions .btn-success:hover[b-1tiydcyt88] {
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.panel-footer[b-1tiydcyt88] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.panel-footer .btn-primary[b-1tiydcyt88] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.panel-footer .btn-primary:hover[b-1tiydcyt88] {
    background: linear-gradient(135deg, #5568d3 0%, #66428b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.panel-footer .btn-primary:disabled[b-1tiydcyt88] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.panel-footer .btn-outline-secondary[b-1tiydcyt88] {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.panel-footer .btn-outline-secondary:hover[b-1tiydcyt88] {
    background: #6c757d;
    color: white;
    transform: translateY(-2px);
}

/* Scrollbar styling */
.panel-body[b-1tiydcyt88]::-webkit-scrollbar {
    width: 8px;
}

.panel-body[b-1tiydcyt88]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.panel-body[b-1tiydcyt88]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

.panel-body[b-1tiydcyt88]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5568d3 0%, #66428b 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .recurring-notifications[b-1tiydcyt88] {
        top: 60px;
        right: 10px;
    }

    .notification-badge[b-1tiydcyt88] {
        width: 45px;
        height: 45px;
    }

    .notification-badge i[b-1tiydcyt88] {
        font-size: 1.25rem;
    }

    .notification-panel[b-1tiydcyt88] {
        width: calc(100vw - 40px);
        max-width: 350px;
    }

    .entry-item[b-1tiydcyt88] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .entry-actions[b-1tiydcyt88] {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 576px) {
    .notification-panel[b-1tiydcyt88] {
        width: calc(100vw - 20px);
        right: -10px;
    }

    .panel-body[b-1tiydcyt88] {
        max-height: 400px;
    }
}

/* Loading state */
.entry-actions .btn:disabled[b-1tiydcyt88] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-border-sm[b-1tiydcyt88] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}
/* /Components/Shared/SavedFiltersList.razor.rz.scp.css */
.saved-filters-section[b-q82qbyqpfr] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.section-header[b-q82qbyqpfr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
}

.section-header h6[b-q82qbyqpfr] {
    margin: 0;
    font-weight: 600;
    color: #495057;
}

.filters-list[b-q82qbyqpfr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-item[b-q82qbyqpfr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

.filter-item:hover[b-q82qbyqpfr] {
    background: #e9ecef;
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.filter-item.default-filter[b-q82qbyqpfr] {
    background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
    border-color: #ffc107;
}

.filter-info[b-q82qbyqpfr] {
    flex: 1;
}

.filter-name[b-q82qbyqpfr] {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.filter-description[b-q82qbyqpfr] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.filter-meta[b-q82qbyqpfr] {
    font-size: 0.8125rem;
}

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

.filter-actions .btn[b-q82qbyqpfr] {
    padding: 0.375rem 0.75rem;
}

.filter-actions .btn i[b-q82qbyqpfr] {
    font-size: 0.875rem;
}

/* Public Filters Section */
.public-filters-section[b-q82qbyqpfr] {
    padding-top: 1rem;
    border-top: 2px solid #e9ecef;
}

.public-filters-section h6[b-q82qbyqpfr] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modal Styling */
.modal.show[b-q82qbyqpfr] {
    display: block;
}

.modal-content[b-q82qbyqpfr] {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.modal-header[b-q82qbyqpfr] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-q82qbyqpfr] {
    font-weight: 600;
    color: #495057;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filter-item[b-q82qbyqpfr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .filter-actions[b-q82qbyqpfr] {
        width: 100%;
        justify-content: flex-end;
    }

    .filter-actions .btn[b-q82qbyqpfr] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8125rem;
    }
}
/* /Components/Shared/TagSelector.razor.rz.scp.css */
/* Tag Selector Styles */

.tag-selector[b-d95qxlbq2h] {
    margin-bottom: 1rem;
}

.tag-input-wrapper[b-d95qxlbq2h] {
    position: relative;
}

.selected-tags[b-d95qxlbq2h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    min-height: 46px;
    background: white;
}

.selected-tag[b-d95qxlbq2h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    animation: slideIn-b-d95qxlbq2h 0.2s ease-out;
}

.selected-tag i[b-d95qxlbq2h] {
    font-size: 0.75rem;
}

.remove-tag[b-d95qxlbq2h] {
    background: none;
    border: none;
    color: white;
    padding: 0;
    margin-left: 0.25rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.remove-tag:hover[b-d95qxlbq2h] {
    opacity: 1;
}

.add-tag-btn[b-d95qxlbq2h] {
    border-radius: 20px;
    font-size: 0.85rem;
}

/* Tag Dropdown */
.tag-dropdown[b-d95qxlbq2h] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-d95qxlbq2h 0.2s ease-out;
}

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

@keyframes slideIn-b-d95qxlbq2h {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tag-dropdown-header[b-d95qxlbq2h] {
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.tag-dropdown-body[b-d95qxlbq2h] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.tag-category[b-d95qxlbq2h] {
    margin-bottom: 0.75rem;
}

.category-header[b-d95qxlbq2h] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

.tag-option[b-d95qxlbq2h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-option:hover[b-d95qxlbq2h] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.tag-option.selected[b-d95qxlbq2h] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #2196f3;
}

.tag-color[b-d95qxlbq2h] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-option i[b-d95qxlbq2h] {
    font-size: 0.9rem;
    color: #6c757d;
}

.tag-option .fa-check[b-d95qxlbq2h] {
    margin-left: auto;
    color: #2196f3;
}

.tag-dropdown-footer[b-d95qxlbq2h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-top: 1px solid #e9ecef;
}

/* Scrollbar */
.tag-dropdown-body[b-d95qxlbq2h]::-webkit-scrollbar {
    width: 8px;
}

.tag-dropdown-body[b-d95qxlbq2h]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.tag-dropdown-body[b-d95qxlbq2h]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.tag-dropdown-body[b-d95qxlbq2h]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive */
@media (max-width: 768px) {
    .tag-dropdown[b-d95qxlbq2h] {
        max-height: 300px;
    }

    .selected-tags[b-d95qxlbq2h] {
        padding: 0.35rem;
    }

    .selected-tag[b-d95qxlbq2h] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/Shared/TimeEntryList.razor.rz.scp.css */
/* Bulk Actions Toolbar */
.bulk-actions-toolbar[b-acskgv0t0f] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.bulk-action-buttons[b-acskgv0t0f] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bulk-action-buttons .btn[b-acskgv0t0f] {
    transition: all 0.2s ease;
}

.bulk-action-buttons .btn:hover[b-acskgv0t0f] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Table row selection */
.time-entry-table tbody tr.table-active[b-acskgv0t0f] {
    background-color: #e7f3ff !important;
    border-left: 3px solid #0d6efd;
}

.time-entry-table tbody tr:hover[b-acskgv0t0f] {
    background-color: #f8f9fa;
}

/* Toast notification positioning */
.toast-container[b-acskgv0t0f] {
    max-width: 400px;
}

.toast[b-acskgv0t0f] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.toast-header[b-acskgv0t0f] {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Bulk operation progress */
.progress[b-acskgv0t0f] {
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar[b-acskgv0t0f] {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Modal styling */
.modal-content[b-acskgv0t0f] {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header[b-acskgv0t0f] {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-header.bg-danger[b-acskgv0t0f] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

/* Checkbox styling */
.form-check-input[b-acskgv0t0f] {
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
}

.form-check-input:checked[b-acskgv0t0f] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bulk-actions-toolbar[b-acskgv0t0f] {
        padding: 0.75rem;
    }
    
    .bulk-actions-toolbar .d-flex[b-acskgv0t0f] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .bulk-action-buttons[b-acskgv0t0f] {
        justify-content: stretch;
    }
    
    .bulk-action-buttons .btn[b-acskgv0t0f] {
        flex: 1;
    }
}

/* Animation for undo notification */
@keyframes slideInUp-b-acskgv0t0f {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast.show[b-acskgv0t0f] {
    animation: slideInUp-b-acskgv0t0f 0.3s ease-out;
}
/* /Components/Shared/UpcomingTimeOffWidget.razor.rz.scp.css */
/* Upcoming Time Off Widget Styling (Section 4.4 - Component 3) */
.upcoming-pto-widget[b-xzwakm1i67] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.upcoming-pto-widget:hover[b-xzwakm1i67] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Widget Header */
.widget-header[b-xzwakm1i67] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

.widget-header h5[b-xzwakm1i67] {
    color: #495057;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.widget-header .btn[b-xzwakm1i67] {
    padding: 0.25rem 0.5rem;
}

/* Balance Summary */
.balance-summary[b-xzwakm1i67] {
    margin-bottom: 1.5rem;
}

.balance-title[b-xzwakm1i67] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-grid[b-xzwakm1i67] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
}

.balance-item[b-xzwakm1i67] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    transition: all 0.2s ease;
}

.balance-item:hover[b-xzwakm1i67] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.balance-label[b-xzwakm1i67] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.balance-value[b-xzwakm1i67] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
    line-height: 1;
}

.balance-unit[b-xzwakm1i67] {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.balance-more[b-xzwakm1i67] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.balance-more .balance-label[b-xzwakm1i67] {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
}

/* Upcoming List */
.upcoming-list[b-xzwakm1i67] {
    margin-top: 1rem;
}

.upcoming-title[b-xzwakm1i67] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pto-item[b-xzwakm1i67] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
}

.pto-item:hover[b-xzwakm1i67] {
    background: #f8f9fa;
    border-color: #0d6efd;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.pto-icon[b-xzwakm1i67] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #0d6efd;
    flex-shrink: 0;
}

.pto-details[b-xzwakm1i67] {
    flex: 1;
    min-width: 0;
}

.pto-title[b-xzwakm1i67] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pto-date[b-xzwakm1i67] {
    font-size: 0.8rem;
    color: #6c757d;
}

.pto-meta[b-xzwakm1i67] {
    text-align: right;
    flex-shrink: 0;
}

.pto-meta .badge[b-xzwakm1i67] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

/* Empty States */
.no-pto-message[b-xzwakm1i67],
.no-upcoming-message[b-xzwakm1i67] {
    text-align: center;
    padding: 2rem 1rem;
}

.no-pto-message i[b-xzwakm1i67] {
    display: block;
    margin-bottom: 0.5rem;
}

.no-pto-message p[b-xzwakm1i67],
.no-upcoming-message p[b-xzwakm1i67] {
    font-size: 0.9rem;
}

/* Loading State */
.upcoming-pto-widget .spinner-border-sm[b-xzwakm1i67] {
    width: 1.5rem;
    height: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .upcoming-pto-widget[b-xzwakm1i67] {
        padding: 1rem;
    }

    .balance-grid[b-xzwakm1i67] {
        grid-template-columns: repeat(2, 1fr);
    }

    .balance-value[b-xzwakm1i67] {
        font-size: 1.25rem;
    }

    .pto-item[b-xzwakm1i67] {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .pto-icon[b-xzwakm1i67] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .pto-title[b-xzwakm1i67] {
        font-size: 0.85rem;
    }

    .pto-date[b-xzwakm1i67] {
        font-size: 0.75rem;
    }
}

/* Animation */
@keyframes fadeInUp-b-xzwakm1i67 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.upcoming-pto-widget[b-xzwakm1i67] {
    animation: fadeInUp-b-xzwakm1i67 0.3s ease-out;
}

.pto-item[b-xzwakm1i67] {
    animation: fadeInUp-b-xzwakm1i67 0.3s ease-out;
    animation-fill-mode: both;
}

.pto-item:nth-child(1)[b-xzwakm1i67] { animation-delay: 0.05s; }
.pto-item:nth-child(2)[b-xzwakm1i67] { animation-delay: 0.1s; }
.pto-item:nth-child(3)[b-xzwakm1i67] { animation-delay: 0.15s; }
.pto-item:nth-child(4)[b-xzwakm1i67] { animation-delay: 0.2s; }
.pto-item:nth-child(5)[b-xzwakm1i67] { animation-delay: 0.25s; }
/* /Components/Time/QuickApplyTemplate.razor.rz.scp.css */
/* Quick Apply Template Component */
.template-quick-apply[b-hexoa06w65] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

.template-quick-apply .form-label[b-hexoa06w65] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-quick-apply .form-label i[b-hexoa06w65] {
    font-size: 1.1rem;
}

.template-quick-apply .input-group[b-hexoa06w65] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.template-quick-apply .form-select[b-hexoa06w65] {
    border: 1px solid #ced4da;
    border-right: none;
}

.template-quick-apply .form-select:focus[b-hexoa06w65] {
    border-color: #80bdff;
    box-shadow: none;
}

.template-quick-apply .btn-outline-primary[b-hexoa06w65] {
    border-left: none;
    border-color: #ced4da;
}

.template-quick-apply .btn-outline-primary:hover:not(:disabled)[b-hexoa06w65] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.template-quick-apply .btn-outline-primary:disabled[b-hexoa06w65] {
    opacity: 0.5;
    cursor: not-allowed;
}

.template-quick-apply small[b-hexoa06w65] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Animation for apply button */
.template-quick-apply .btn-outline-primary:not(:disabled):hover i[b-hexoa06w65] {
    animation: bolt-flash-b-hexoa06w65 0.6s ease-in-out infinite;
}

@keyframes bolt-flash-b-hexoa06w65 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}
/* /Components/Time/RecurringEntryModal.razor.rz.scp.css */
/* Recurring Entry Modal Styles */

.modal-header.bg-gradient-primary[b-ucmh2r6urr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Pattern Selector */
.pattern-selector[b-ucmh2r6urr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.pattern-option[b-ucmh2r6urr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.pattern-option:hover[b-ucmh2r6urr] {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.pattern-option.active[b-ucmh2r6urr] {
    border-color: #667eea;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.pattern-icon[b-ucmh2r6urr] {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 0.75rem;
}

.pattern-option.active .pattern-icon[b-ucmh2r6urr] {
    animation: pulse-icon-b-ucmh2r6urr 1s ease-in-out infinite;
}

@keyframes pulse-icon-b-ucmh2r6urr {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.pattern-info[b-ucmh2r6urr] {
    text-align: center;
}

.pattern-info strong[b-ucmh2r6urr] {
    display: block;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.pattern-info small[b-ucmh2r6urr] {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Day Selector */
.day-selector[b-ucmh2r6urr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-button[b-ucmh2r6urr] {
    flex: 1;
    min-width: 50px;
    padding: 0.75rem 0.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    color: #6c757d;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-button:hover[b-ucmh2r6urr] {
    border-color: #667eea;
    background: #f8f9fa;
}

.day-button.selected[b-ucmh2r6urr] {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

/* Preview Section */
.preview-section[b-ucmh2r6urr] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
}

.preview-section h6[b-ucmh2r6urr] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
}

.preview-list[b-ucmh2r6urr] {
    display: grid;
    gap: 0.5rem;
}

.preview-item[b-ucmh2r6urr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.preview-item:hover[b-ucmh2r6urr] {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.preview-item i[b-ucmh2r6urr] {
    font-size: 1.1rem;
}

.preview-item span[b-ucmh2r6urr] {
    flex: 1;
    font-weight: 500;
    color: #2c3e50;
}

.preview-item small[b-ucmh2r6urr] {
    font-size: 0.85rem;
}

/* Form Elements */
.form-label.fw-bold[b-ucmh2r6urr] {
    color: #2c3e50;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label.fw-bold i[b-ucmh2r6urr] {
    font-size: 1.1rem;
}

.form-select-lg[b-ucmh2r6urr] {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    border-radius: 8px;
}

.input-group-text[b-ucmh2r6urr] {
    background: #f8f9fa;
    border-color: #ced4da;
}

/* Alert Styles */
.alert-info[b-ucmh2r6urr] {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border-color: #17a2b8;
    border-left: 4px solid #17a2b8;
}

.alert-info small[b-ucmh2r6urr] {
    line-height: 1.6;
}

/* Switch Styling */
.form-check-input:checked[b-ucmh2r6urr] {
    background-color: #667eea;
    border-color: #667eea;
}

.form-check-input:focus[b-ucmh2r6urr] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Modal Footer */
.modal-footer[b-ucmh2r6urr] {
    border-top: 1px solid #dee2e6;
    padding: 1.25rem;
}

.modal-footer .btn[b-ucmh2r6urr] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
}

.modal-footer .btn-primary[b-ucmh2r6urr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.modal-footer .btn-primary:hover[b-ucmh2r6urr] {
    background: linear-gradient(135deg, #5568d3 0%, #66428b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-footer .btn-primary:disabled[b-ucmh2r6urr] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pattern-selector[b-ucmh2r6urr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .day-selector[b-ucmh2r6urr] {
        justify-content: space-between;
    }

    .day-button[b-ucmh2r6urr] {
        flex: 0 0 calc(14.28% - 0.5rem);
        min-width: 40px;
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    .preview-item[b-ucmh2r6urr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .pattern-selector[b-ucmh2r6urr] {
        grid-template-columns: 1fr;
    }

    .pattern-option[b-ucmh2r6urr] {
        flex-direction: row;
        justify-content: flex-start;
        padding: 1rem;
    }

    .pattern-icon[b-ucmh2r6urr] {
        margin-bottom: 0;
        margin-right: 1rem;
        font-size: 1.5rem;
    }

    .pattern-info[b-ucmh2r6urr] {
        text-align: left;
    }
}

/* Animation for modal appearance */
.modal.show .modal-dialog[b-ucmh2r6urr] {
    animation: slideDown-b-ucmh2r6urr 0.3s ease-out;
}

@keyframes slideDown-b-ucmh2r6urr {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}