@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #F9FBFD;
    color: #445566;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: #445566;
    font-weight: 700;
    line-height: 1.3;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #3B82F6;
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover, .btn-link:hover {
    color: #2563EB;
}

.btn-primary {
    color: #FFFFFF;
    background-color: #3B82F6;
    border-color: #3B82F6;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #2563EB;
    border-color: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:disabled {
    background-color: #A4D1FF;
    border-color: #A4D1FF;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    color: #445566;
    background-color: transparent;
    border: 1px solid #CCD3DC;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #F5F7FA;
    border-color: #A4D1FF;
    color: #445566;
}

.btn-outline-primary {
    color: #3B82F6;
    background-color: transparent;
    border: 1px solid #3B82F6;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: #3B82F6;
    border-color: #3B82F6;
    color: #FFFFFF;
}

/* Add button styling - override outline to solid blue */
.add-btn {
    color: #FFFFFF !important;
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
}

.add-btn:hover, .add-btn:focus {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.content {
    padding-top: 24px;
}

/* Form Controls */
.form-control {
    background: #FFFFFF;
    border: 1px solid #CCD3DC;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #445566;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control::placeholder {
    color: #99A3B2;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #445566;
    margin-bottom: 8px;
}

/* Card Styling */
.card {
    background: #FFFFFF;
    border: 1px solid #ECEFF3;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    padding: 24px;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid #ECEFF3;
    padding: 0 0 16px 0;
    margin-bottom: 24px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #445566;
    margin: 0;
}

/* Status Badges */
.badge {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.bg-primary {
    background-color: #3B82F6 !important;
    color: #FFFFFF;
}

.badge.bg-success {
    background-color: #10B981 !important;
    color: #FFFFFF;
}

.badge.bg-warning {
    background-color: #F59E0B !important;
    color: #FFFFFF;
}

.badge.bg-danger {
    background-color: #EF4444 !important;
    color: #FFFFFF;
}

.badge.bg-secondary {
    background-color: #CCD3DC !important;
    color: #445566;
}

/* Validation States */
.valid.modified:not([type=checkbox]) {
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.validation-message {
    color: #EF4444;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* Table Styling */
.table {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #ECEFF3;
}

.table thead th {
    background-color: #F5F7FA;
    border-bottom: 1px solid #ECEFF3;
    color: #445566;
    font-weight: 600;
    font-size: 14px;
    padding: 16px;
    vertical-align: middle;
    border-top: none;
}

.table tbody tr {
    border-bottom: 1px solid #F5F7FA;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.table tbody tr:hover {
    background-color: #F9FBFD;
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody td {
    padding: 16px;
    font-size: 14px;
    color: #445566;
    vertical-align: middle;
    border-top: none;
}

.table .table-actions {
    text-align: right;
    width: 120px;
}

.table .table-actions .btn {
    margin: 0 2px;
    padding: 6px 12px;
    font-size: 12px;
}

/* Navigation styling */
.nav-divider {
    margin: 16px 24px;
    border-color: #ECEFF3;
}

.nav-section-header {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Admin Interface Styles */
.admin-page-title {
    color: #445566;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    margin-bottom: 24px;
}

.admin-page-title i {
    color: #EF4444;
}

.admin-context-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #D6ECFF;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #3B82F6;
}

/* Admin Cards */
.admin-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #ECEFF3;
    overflow: hidden;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.admin-card-header {
    background: #F5F7FA;
    padding: 24px;
    border-bottom: 1px solid #ECEFF3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-card-header h5 {
    margin: 0;
    color: #445566;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Page Layout Enhancements */
.table-page {
    max-width: 100%;
    margin: 0 auto;
}

.table-page-heading {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ECEFF3;
}

.table-page-heading h1 {
    font-size: 32px;
    font-weight: 700;
    color: #445566;
    margin: 0;
}

/* Search and Filter Bar */
.table-toolbar {
    background: #FFFFFF;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.table-toolbar .search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.table-toolbar .search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 1px solid #CCD3DC;
    border-radius: 10px;
    font-size: 14px;
    color: #445566;
    background: #FFFFFF;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.table-toolbar .search-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.table-toolbar .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #99A3B2;
    font-size: 16px;
}

/* Loading States */
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #99A3B2;
    font-size: 14px;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #ECEFF3;
    border-top: 2px solid #3B82F6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert Enhancements */
.alert {
    border-radius: 12px;
    border: none;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.alert-danger {
    background-color: #FEF2F2;
    color: #EF4444;
    border-left: 4px solid #EF4444;
}

.alert-success {
    background-color: #F0FDF4;
    color: #10B981;
    border-left: 4px solid #10B981;
}

.alert-warning {
    background-color: #FFFBEB;
    color: #F59E0B;
    border-left: 4px solid #F59E0B;
}

.alert-info {
    background-color: #EFF6FF;
    color: #3B82F6;
    border-left: 4px solid #3B82F6;
}

/* Pagination Footer */
.projects-footer,
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid #ECEFF3;
    font-size: 14px;
    color: #99A3B2;
}

/* Project Link Styling */
.project-link {
    color: #3B82F6;
    text-decoration: none;
    font-weight: 500;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-link:hover {
    color: #2563EB;
    text-decoration: underline;
}

/* Federation Badge */
.federation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 6px;
    background-color: #D6ECFF;
    color: #3B82F6;
    border-radius: 4px;
    font-weight: 500;
    margin-left: 8px;
}

/* Form Section Styling */
.section-container {
    background: #FFFFFF;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.section-container:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: #445566;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #F5F7FA;
    position: relative;
}

.section-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #3B82F6;
    border-radius: 1px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #ECEFF3;
}

.form-actions .btn {
    min-width: 120px;
    padding: 12px 24px;
    font-weight: 500;
    border-radius: 12px;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-actions .btn-primary {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #FFFFFF;
}

.form-actions .btn-primary:hover {
    background: #2563EB;
    border-color: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.form-actions .btn-secondary {
    background: transparent;
    border: 1px solid #CCD3DC;
    color: #445566;
}

.form-actions .btn-secondary:hover {
    background: #F5F7FA;
    border-color: #A4D1FF;
    color: #445566;
}

/* Enhanced Row Styling for Forms */
.section-container .row {
    margin: 0 -12px;
}

.section-container .row > [class*="col-"] {
    padding: 0 12px;
}

/* Form Layout Enhancements */
.form-layout-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.form-layout-single-column {
    max-width: 600px;
}

@media (max-width: 768px) {
    .form-layout-two-column {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .section-container {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    .form-actions {
        flex-direction: column-reverse;
        margin-top: 24px;
        padding-top: 20px;
    }
    
    .form-actions .btn {
        width: 100%;
        margin: 0;
    }
}

/* Validation Summary Styling */
.validation-summary {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-left: 4px solid #EF4444;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #EF4444;
}

.validation-summary ul {
    margin: 0;
    padding-left: 20px;
}

.validation-summary li {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

/* Form Helper Text */
.form-helper-text {
    font-size: 12px;
    color: #99A3B2;
    margin-top: 6px;
    line-height: 1.4;
}

/* Required Field Indicator */
.required-indicator {
    color: #EF4444;
    font-weight: 600;
    margin-left: 2px;
}

/* Form Section with Icon */
.section-header-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.section-header-with-icon .section-icon {
    width: 24px;
    height: 24px;
    color: #3B82F6;
    flex-shrink: 0;
}

/* Stepped Forms */
.form-step {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-step.active {
    opacity: 1;
    pointer-events: auto;
}

.form-step.completed {
    opacity: 0.8;
}

/* Progress Indicator for Multi-step Forms */
.form-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 0 24px;
}

.form-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
}

.form-progress-step::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: #ECEFF3;
    z-index: 1;
}

.form-progress-step:last-child::after {
    display: none;
}

.form-progress-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ECEFF3;
    color: #99A3B2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-progress-step.active .form-progress-number {
    background: #3B82F6;
    color: #FFFFFF;
}

.form-progress-step.completed .form-progress-number {
    background: #10B981;
    color: #FFFFFF;
}

.form-progress-step.completed::after {
    background: #10B981;
}

.form-progress-label {
    font-size: 12px;
    color: #99A3B2;
    text-align: center;
    font-weight: 500;
}

.form-progress-step.active .form-progress-label {
    color: #3B82F6;
}

.form-progress-step.completed .form-progress-label {
    color: #10B981;
}

.admin-card-body {
    padding: 1.5rem;
}

/* Statistics Cards */
.stat-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 1rem;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-card-primary .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card-success .stat-icon {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}

.stat-card-warning .stat-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card-info .stat-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-content h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.stat-content p {
    margin: 0;
    color: #6c757d;
    font-weight: 500;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #495057;
    transition: all 0.2s ease;
    position: relative;
}

.quick-action-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    text-decoration: none;
    transform: translateX(5px);
}

.quick-action-btn i {
    width: 20px;
    margin-right: 0.75rem;
    color: #6c757d;
}

.quick-action-btn .badge {
    margin-left: auto;
}

/* Audit Log List */
.audit-log-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.audit-log-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 4px solid #e74c3c;
}

.audit-log-icon {
    width: 40px;
    height: 40px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-log-content {
    flex: 1;
}

.audit-log-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.audit-log-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.audit-log-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #868e96;
}

.audit-log-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.audit-log-status {
    flex-shrink: 0;
}

/* Health Indicators */
.health-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.health-item {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.health-item:last-child {
    border-bottom: none;
}

.health-label {
    font-weight: 500;
    color: #495057;
}

.health-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.health-ok {
    color: #28a745;
}

.health-warning {
    color: #ffc107;
}

.health-error {
    color: #dc3545;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Admin Dashboard Specific */
.admin-dashboard {
    padding: 2rem 0;
}

/* Cross-Tenant Viewer Styles */
.cross-tenant-viewer {
    padding: 2rem 0;
}

.client-context-cell {
    min-width: 150px;
}

.client-badge {
    display: inline-block;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    min-width: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-result-row {
    transition: background-color 0.2s ease;
}

.search-result-row:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.entity-type-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cross-tenant-warning {
    border-left: 4px solid #dc3545;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.cross-tenant-warning i {
    color: #dc3545;
    margin-right: 0.5rem;
}

.search-filters-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.search-filters-card .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.search-results-table {
    font-size: 0.9rem;
}

.search-results-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem;
}

.search-results-table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.details-modal .modal-content {
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

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

.details-modal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.search-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.no-results-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.no-results-state i {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1.5rem;
}

.security-context-indicator {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.admin-action-log {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Cross-tenant specific table styling */
.cross-tenant-table .client-context-column {
    background: rgba(0, 123, 255, 0.05);
    border-right: 2px solid #007bff;
    position: sticky;
    left: 0;
    z-index: 10;
}

.search-summary {
    background: #e7f3ff;
    border: 1px solid #b3d7ff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.search-summary .search-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #0056b3;
}

.export-options {
    position: relative;
}

.export-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 200px;
}

.export-dropdown a {
    display: block;
    padding: 0.5rem 1rem;
    color: #495057;
    text-decoration: none;
    border-bottom: 1px solid #f8f9fa;
}

.export-dropdown a:hover {
    background: #f8f9fa;
    color: #212529;
}

.export-dropdown a:last-child {
    border-bottom: none;
}

/* Responsive adjustments for admin interface */
@media (max-width: 767.98px) {
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .audit-log-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .audit-log-meta {
        flex-direction: column;
        gap: 0.25rem;
    }
}

.nav-section-header span {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Sidebar styles */
.nav-scrollable, .navbar, .top-row {
    background: #fff !important;
    color: #222 !important;
    border-right: 1px solid #e0e0e0;
}

.nav-link {
    color: #222 !important;
    border-radius: 6px;
    margin-bottom: 2px;
    font-weight: 500;
}

.nav-link.active, .nav-link:focus, .nav-link:hover {
    background: #f5f5f5 !important;
    color: #000 !important;
}

/* Main content styles */
body, .main {
    background: #fff !important;
    color: #222;
}

h1, h2, h3, h4, h5, h6, label {
    color: #111;
    font-weight: 700;
}

/* Form and input styles */
input, select, textarea, .form-control {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
    border-color: #bdbdbd !important;
    box-shadow: none;
}

/* Button styles */
.btn, button {
    border-radius: 6px;
    font-weight: 500;
    background: #fff;
    color: #222;
    border: 1px solid #e0e0e0;
    transition: background 0.2s, color 0.2s;
}
.btn-primary, .btn-success {
    background: #222 !important;
    color: #fff !important;
    border: none;
}
.btn-primary:hover, .btn-success:hover {
    background: #111 !important;
}
.btn-danger {
    background: #fff !important;
    color: #d32f2f !important;
    border: 1px solid #d32f2f;
}
.btn-danger:hover {
    background: #d32f2f !important;
    color: #fff !important;
}

/* Table styles */
.table {
    background: #fff;
    color: #222;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}
.table th, .table td {
    border: none;
    padding: 0.75rem 1rem;
}

/* Misc */
hr, .divider {
    border-color: #e0e0e0;
}

/* --- Custom form-page styles for add/edit pages --- */
.form-page {
    margin: 2rem;
}
.form-page .detail-info {
    font-weight: 500;
    line-height: 2rem;
}
.form-page .form-container {
    display: flex;
    flex-wrap: wrap;
    width: 36rem;
}
.form-page .block-container {
    margin: 0 1rem;
}
.form-page .input-container,
.form-page .input-container-wide {
    display: flex;
    flex-direction: column;
    width: 15rem;
}
.form-page .input-container .required-label,
.form-page .input-container-wide .required-label {
    width: 15rem;
}
.form-page .input-container .info-text,
.form-page .input-container-wide .info-text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #888;
}
.form-page .input-container .required-label::before,
.form-page .input-container-wide .required-label::before {
    display: inline-block;
    margin-inline-end: 0.4rem;
    color: #ff4d4f;
    font-size: 1rem;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: "*";
}
.form-page .input-container .input-field,
.form-page .input-container-wide .input-field {
    width: 15rem;
    background-color: #f9f9f9;
}
.form-page .input-container .info-field,
.form-page .input-container-wide .info-field {
    width: 15rem;
    background-color: #f9f9f9;
    line-height: 1rem;
    padding: .4rem .8rem;
    margin: .2rem 0;
    border-radius: .5rem;
}
.form-page .input-container .ant-select-selector,
.form-page .input-container-wide .ant-select-selector {
    background-color: #f9f9f9;
}
.form-page .input-container .error-field,
.form-page .input-container-wide .error-field {
    color: #c22222;
}
.form-page .input-container .ant-switch,
.form-page .input-container-wide .ant-switch {
    width: 2rem;
}
.form-page .input-container .ant-tag,
.form-page .input-container-wide .ant-tag {
    width: fit-content;
    font-size: 14px;
    padding: 0.2rem 0.6rem 0.4rem;
}
.form-page .input-container-wide {
    width: 36rem;
}
.form-page .input-container-wide .dual-dropdowns {
    display: flex;
    gap: 3.4rem;
}
.form-page .form-container .controls-container {
    margin: 2rem 0;
    flex: 100%;
}

/* --- Custom table-page styles for list pages --- */
.table-page {
    margin: 2rem;
}
.table-page .table-page-heading {
    margin-bottom: 2rem;
}
.table-page .ant-divider-vertical {
    height: 100%;
    border-inline-start: 2px solid rgba(5 5 5 / 6%);
}
.table-page .table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.table-page .search-input-wrapper {
    flex: 1 1 50%;
    min-width: 300px;
}
@media (width <= 768px) {
    .table-page .search-input-wrapper {
        flex: 1 1 100%;
    }
    .table-page .actions-wrapper {
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }
}

/* Increase the size of all main page titles (list and detail/add) for better visibility */
.table-page-heading h1,
.table-page-heading h4,
.form-page .page-title,
.form-page h1 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.readonly-field {
    background-color: #f0f0f0 !important;
    color: #888 !important;
    cursor: not-allowed;
}

/* Status badge styles */
.status-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 2px solid transparent;
    background: #f4faff;
    color: #1976d2;
    margin: 0 0.2em;
    min-width: 70px;
    text-align: center;
    letter-spacing: 0.01em;
    vertical-align: middle;
}
.status-completed {
    background: #e3f0ff;
    color: #1976d2;
    border-color: #90caf9;
}
.status-lightred {
    background: #ffeaea;
    color: #d32f2f;
    border-color: #ffcdd2;
}
.status-green {
    background: #eaffea;
    color: #388e3c;
    border-color: #a5d6a7;
}
.status-blue {
    background: #e3f0ff;
    color: #1976d2;
    border-color: #90caf9;
}
.status-grey {
    background: #f4f4f4;
    color: #757575;
    border-color: #e0e0e0;
}

/* Light grey table headers for all tables */
.table th {
    background-color: #f2f2f2 !important;
    color: #222 !important;
}

.table td, .table th {
    vertical-align: middle;
}

/* Project Status Badge Styles */
.project-status-badge {
    font-weight: 600;
    font-size: 0.75rem;
}

.status-active {
    background-color: #28a745 !important;
    color: white !important;
}

.status-planning {
    background-color: #007bff !important;
    color: white !important;
}

.status-hold {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.status-completed {
    background-color: #28a745 !important;
    color: white !important;
}

.status-cancelled {
    background-color: #dc3545 !important;
    color: white !important;
}

.status-unknown {
    background-color: #6c757d !important;
    color: white !important;
}

/* Project Progress Bar Styles */
.project-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-wrapper {
    width: 80px;
}

.progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #445566;
    min-width: 30px;
}

/* Sponsor Dashboard Button */
.sponsor-dashboard-btn {
    background-color: #FFCB3D !important;
    border-color: #FFCB3D !important;
    color: #445566 !important;
    font-weight: 600;
}

.sponsor-dashboard-btn:hover {
    background-color: #F5B800 !important;
    border-color: #F5B800 !important;
    color: #445566 !important;
}

/* Metadata Items */
.metadata-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #495057;
}

.metadata-icon {
    width: 20px;
    text-align: center;
}

.metadata-label {
    font-weight: 500;
}

.metadata-value {
    color: #212529;
}

/* Quick Metrics */
.metric-item {
    text-align: center;
    padding: 0.5rem 0;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007bff;
    line-height: 1;
}

.metric-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Project Details Layout */
.project-details .card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.project-details .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .project-progress-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .progress-bar-wrapper {
        width: 100%;
    }
    
    .metadata-item {
        margin-bottom: 0.5rem;
    }
}

/* Tab count badges */
.nav-tabs .nav-link .badge {
    font-size: 0.6rem;
}

/* Project Pages Styling */
.section-frame {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.section-frame:last-child {
    margin-bottom: 0;
}

/* ListPage Spacing - CSS Custom Properties for flexible theming */
:root {
    --listpage-section-spacing: 1.5rem;
}

/* Apply consistent spacing between ListPage sections */
body .section-frame {
    margin-bottom: var(--listpage-section-spacing);
}

body .section-frame:last-child {
    margin-bottom: 0;
}

/* ListPage Content Wrappers - Required for consistent layout */
.listpage-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.listpage-search-content {
    /* No additional padding - section-frame provides the 20px padding */
}

.listpage-table-content {
    /* No additional padding - section-frame provides the 20px padding */
}

.table-pagination {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

/* Pagination info styling - matches form-select typography */
.section-frame .table-pagination .pagination-info {
    font-size: 1rem;                     /* Match form-select typography */
    font-weight: 400;                    /* Match form-select font weight */
    line-height: 1.5;                    /* Match form-select line height */
    color: #212529;                      /* Match form-select color for consistency */
    font-family: var(--bs-font-sans-serif); /* Bootstrap font stack */
}

/* Compact pagination section */
.table-pagination {
    padding: 0.75rem 0; /* Reduced from default to make section less tall */
}

/* Add spacing around pagination elements */
.pagination-info {
    margin-right: 1rem; /* Space from navigation buttons */
}

.pagination-size {
    margin-left: 1rem; /* Space from navigation buttons */
}

/* Compact pagination buttons */
.pagination-navigation .btn {
    padding: 0.25rem 0.5rem; /* Much smaller padding */
    font-size: 0.875rem; /* Slightly smaller font */
    line-height: 1.2; /* Tighter line height */
    min-width: 2rem; /* Consistent minimum width */
    height: 2rem; /* Fixed height for uniformity */
    border-radius: 0.25rem;
}

/* Current page button styling - more compact */
.pagination-navigation .btn-primary {
    font-weight: 500;
}

/* Navigation arrows - keep them consistent */
.pagination-navigation .btn i {
    font-size: 0.75rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.search-container {
    position: relative;
}

.search-container .input-group {
    width: 100%;
}

.search-container .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.search-container .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.filter-group {
    min-width: 150px;
}

.filter-group .form-select {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.project-list-table {
    margin-bottom: 0;
}

.project-list-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    padding: 12px;
    vertical-align: middle;
}

.project-list-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.project-list-table tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
}

.project-list-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.project-list-table tbody tr:hover {
    background-color: #e9ecef !important;
}

.project-list-table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

.project-row {
    border-bottom: 1px solid #dee2e6;
}

.empty-state {
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: #adb5bd;
}

.empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .search-container {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    .ms-auto {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    .float-end {
        float: none !important;
        width: 100%;
    }
    
    .d-flex.align-items-center.gap-3 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px !important;
    }
    
    .filter-group {
        min-width: auto;
        width: 100%;
    }
    
    .project-list-table {
        font-size: 0.875rem;
    }
    
    .project-list-table th,
    .project-list-table td {
        padding: 8px 4px;
    }
}

/* View System Styles */
.view-dropdown, .column-selector {
    position: relative;
}

.view-button, .column-button {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;          /* Updated: 16px for better readability (matches form-select) */
    font-weight: 400;         /* Updated: explicit weight for consistency (matches form-select) */
    line-height: 1.5;         /* Updated: proper spacing (matches form-select) */
    color: #212529;           /* Updated: better contrast (matches form-select) */
    min-width: 120px;
    text-align: left;
    transition: all 150ms ease;
    /* Bootstrap form-select SVG arrow for consistency */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;   /* Space for SVG arrow */
}

.view-button:hover, .column-button:hover,
.view-button:focus, .column-button:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.view-label {
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    margin-bottom: 4px;
    display: block;
}

.view-menu, .column-menu {
    min-width: 220px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    padding: 8px 0;
}

.view-menu .dropdown-item, .column-menu .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    color: #374151;
    border: none;
    background: transparent;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-menu .dropdown-item:hover, .column-menu .dropdown-item:hover,
.view-menu .dropdown-item:focus, .column-menu .dropdown-item:focus {
    background-color: #F3F4F6;
    color: #1F2937;
}

.view-menu .dropdown-item.active {
    background-color: #EBF4FF;
    color: #3B82F6;
    font-weight: 500;
}

.view-action-buttons {
    border-top: 1px solid #E5E7EB;
    padding: 8px 16px;
    margin-top: 8px;
}

.view-action-buttons .btn {
    font-size: 12px;
    padding: 6px 12px;
    margin-right: 8px;
    border-radius: 6px;
}

.column-checkbox {
    margin-right: 8px;
}

.column-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

.view-management-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sortable Table Headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: all 150ms ease;
    position: relative;
}

.sortable-header:hover {
    background-color: #F8FAFC;
    color: #3B82F6;
}

.sortable-header i {
    font-size: 12px;
    opacity: 0.7;
}

/* Enhanced Table Responsive Design */
@media (max-width: 1200px) {
    .view-management-container {
        width: 25% !important;
        gap: 4px;
    }
    
    .view-button, .column-button {
        min-width: 80px;
        font-size: 12px;
        padding: 6px 8px;
    }
}

@media (max-width: 992px) {
    .search-container {
        width: 50% !important;
    }
    
    .view-management-container {
        width: 30% !important;
    }
}

@media (max-width: 768px) {
    .d-flex.align-items-center.mb-3 {
        flex-direction: column;
        gap: 12px;
    }
    
    .search-container,
    .view-management-container,
    .ms-auto {
        width: 100% !important;
    }
    
    .view-management-container {
        justify-content: center;
    }
    
    .float-end {
        float: none !important;
        width: 100%;
    }
}

/* Enhanced Filter Section */
.d-flex.align-items-center.gap-3.flex-wrap {
    gap: 12px !important;
}

.filter-group {
    min-width: 150px;
}

@media (max-width: 768px) {
    .filter-group {
        min-width: 120px;
        flex: 1;
    }
    
    .d-flex.align-items-center.gap-3.flex-wrap {
        gap: 8px !important;
    }
}

/* Table Enhancement */
.table-responsive {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.project-list-table {
    margin-bottom: 0;
}

.project-list-table thead th {
    background-color: #F8FAFC;
    border-bottom: 2px solid #E5E7EB;
    font-weight: 600;
    color: #374151;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 16px 12px;
}

.project-list-table tbody td {
    padding: 16px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.project-list-table tbody tr:last-child td {
    border-bottom: none;
}

/* Loading States */
.view-button:disabled,
.column-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-border-sm {
    width: 16px;
    height: 16px;
}

/* View System Modals */
.modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal .modal-header {
    border-bottom: 1px solid #E5E7EB;
    padding: 20px 24px;
}

.modal .modal-body {
    padding: 24px;
}

.modal .modal-footer {
    border-top: 1px solid #E5E7EB;
    padding: 16px 24px;
}

/* =====================================
   List Page Header Component Styles
   ===================================== */

/* Main container - now uses section-frame class for consistent styling */

/* Title section */
.listpage-header-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin: 0;
    line-height: 1.2;
}

/* Controls container */
.listpage-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* View section wrapper */
.listpage-header-views {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Grouped dropdown styling (btn-group pattern) */
.listpage-header-views .btn-group {
    gap: 0; /* No gap between grouped dropdowns */
}

/* Connected dropdown borders */
.listpage-header-views .btn-group .listpage-header-dropdown:not(:last-child) {
    border-right: 0; /* Remove right border to connect dropdowns */
}

/* Control labels */
.view-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    margin-bottom: 0;
}

/* Dropdown Button Typography and Arrow - Unified with filter dropdowns */
.listpage-header-dropdown-button {
    font-size: 1rem !important;          /* 16px for better readability (matches form-select) */
    font-weight: 400 !important;         /* Explicit weight for consistency (matches form-select) */
    line-height: 1.5 !important;         /* Proper spacing (matches form-select) */
    color: #212529 !important;           /* Better contrast (matches form-select) */
    /* Bootstrap form-select SVG arrow for consistency */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;   /* Space for SVG arrow */
}

/* Hide Unicode arrow characters - use SVG background instead */
.listpage-header-dropdown-icon {
    display: none !important;
}

/* Dropdown containers */
/* Legacy dropdown styles removed - now using listpage-header specific styles below */

/* Responsive behavior */
/* Mobile first responsive values */
@media (max-width: 767.98px) {
    .listpage-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .listpage-header-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .listpage-header-controls {
        width: 100%;
        justify-content: flex-end;
    }
    
    .view-dropdown,
    .column-dropdown {
        min-width: 120px;
        flex: 1;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .view-dropdown,
    .column-dropdown {
        min-width: 140px;
    }
}

@media (min-width: 1200px) {
    .view-dropdown,
    .column-dropdown {
        min-width: 160px;
    }
}

.listpage-header-dropdown-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.listpage-header-dropdown.open .listpage-header-dropdown-icon {
    transform: rotate(180deg);
}

.listpage-header-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

/* Right-aligned dropdown for column selector (rightmost element) */
.listpage-header-dropdown.column-dropdown .listpage-header-dropdown-menu {
    left: auto;
    right: 0;
    min-width: 250px;
}

/* Removed duplicate rule - consolidated below with .dropdown-item */

/* Component-Specific Elements */
.listpage-header-view-name {
    flex: 1;
    text-align: left;
}

.listpage-header-view-actions {
    display: flex;
    gap: 0.25rem;
}

.listpage-header-view-action {
    padding: 0.25rem;
    border: none;
    background: none;
    color: #6B7280;
    cursor: pointer;
    border-radius: 4px;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listpage-header-view-action:hover {
    background: #F3F4F6;
    color: #374151;
}

.listpage-header-view-action:disabled {
    color: #D1D5DB;
    cursor: not-allowed;
}

.listpage-header-view-action:disabled:hover {
    background: none;
    color: #D1D5DB;
}

.listpage-header-column-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.listpage-header-column-checkbox:hover {
    background: #F8F9FA;
}

.listpage-header-column-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    accent-color: #0d6efd;
}

.listpage-header-column-checkbox .form-check-label {
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    cursor: pointer;
    margin-bottom: 0;
}

/* Make column dropdown items match View dropdown button font styling */
.listpage-header-dropdown .dropdown-item-text {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    width: 100%;
}

.listpage-header-dropdown .dropdown-item-text .form-check {
    padding: 0.5rem 0.75rem;
    margin: 0;
    border: none;
    background: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.listpage-header-dropdown .dropdown-item-text .form-check:hover {
    background: #F8F9FA;
}

.listpage-header-dropdown .dropdown-item-text .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    accent-color: #0d6efd;
    flex-shrink: 0;
}

.listpage-header-dropdown .dropdown-item-text .form-check-label {
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    cursor: pointer;
    margin-bottom: 0;
    flex: 1;
}

.listpage-header-unsaved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #F59E0B;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.listpage-header-unsaved-indicator::before {
    content: "●";
    font-size: 0.5rem;
}

/* Modal Styles */
.listpage-header-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.listpage-header-modal .modal-header {
    border-bottom: 1px solid #E5E7EB;
    padding: 1.5rem;
}

.listpage-header-modal .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1F2937;
}

.listpage-header-modal .modal-body {
    padding: 1.5rem;
}

.listpage-header-modal .modal-footer {
    border-top: 1px solid #E5E7EB;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

.listpage-header-character-count {
    font-size: 0.75rem;
    color: #6B7280;
    text-align: right;
    margin-top: 0.25rem;
}

.listpage-header-character-count.error {
    color: #DC2626;
}

/* Responsive Behavior */
@media (max-width: 1024px) {
    .listpage-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .listpage-header-title {
        text-align: center;
    }
    
    .listpage-header-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .listpage-header {
        padding: 1rem;
    }
    
    .listpage-header-title {
        font-size: 1.5rem;
    }
    
    .listpage-header-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .listpage-header-dropdown-button {
        min-width: 100%;
    }
    
    .listpage-header-dropdown-menu {
        position: fixed;
        top: auto;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-height: 50vh;
    }
}

/* ========================================
   GLOBAL DROPDOWN DESIGN SYSTEM IMPLEMENTATION
   Based on tasks/ux-features.md → Global Dropdown Design System
   ======================================== */

/* CSS Custom Properties for Global Dropdown Design System */
:root {
    /* Dropdown spacing */
    --dropdown-padding-y: 0.5rem;
    --dropdown-padding-x: 0.75rem;
    --dropdown-margin-bottom: 0;
    
    /* Dropdown typography */
    --dropdown-font-size: 1rem;
    --dropdown-font-weight: 400;
    --dropdown-line-height: 1.5;
    --dropdown-color: #212529;
    
    /* Dropdown borders */
    --dropdown-border-width: 1px;
    --dropdown-border-color: var(--bs-border-color);
    --dropdown-border-radius: var(--bs-border-radius);
    
    /* Dropdown states */
    --dropdown-hover-bg: var(--bs-light);
    --dropdown-focus-border: var(--bs-primary);
    --dropdown-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* UNIVERSAL DROPDOWN TYPOGRAPHY - Applied to ALL dropdown types */
.dropdown-button,
.view-dropdown .btn,
.column-dropdown .btn,
.filter-dropdown .form-select,
.entity-selector,
.status-selector,
.priority-selector,
.listpage-header-dropdown-button {
    font-size: var(--dropdown-font-size) !important;          /* 16px - Bootstrap form-select standard */
    font-weight: var(--dropdown-font-weight) !important;      /* Normal weight - Bootstrap standard */
    line-height: var(--dropdown-line-height) !important;      /* Bootstrap form-select line-height */
    color: var(--dropdown-color) !important;                  /* Bootstrap form-select color - high contrast */
    font-family: var(--bs-font-sans-serif); /* Bootstrap font stack */
}

/* UNIVERSAL ARROW STYLING - Applied to ALL dropdown types */
.dropdown-button,
.view-dropdown .btn,
.column-dropdown .btn,
.filter-dropdown .form-select,
.entity-selector,
.status-selector,
.priority-selector,
.listpage-header-dropdown-button {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}

/* REMOVE UNICODE ARROWS - No longer used in favor of SVG */
.dropdown-arrow,
.chevron-down,
.arrow-icon,
.listpage-header-dropdown-icon {
    display: none !important; /* Hide all Unicode arrow characters */
}

/* DEFAULT STATE - Applied to all dropdown types */
.dropdown-base,
.dropdown-button,
.view-dropdown .btn,
.column-dropdown .btn,
.listpage-header-dropdown-button {
    background: #ffffff;
    border: var(--dropdown-border-width) solid var(--dropdown-border-color);
    border-radius: var(--dropdown-border-radius);
    padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

/* HOVER STATE - Universal hover behavior */
.dropdown-base:hover,
.dropdown-button:hover,
.view-dropdown .btn:hover,
.column-dropdown .btn:hover,
.listpage-header-dropdown-button:hover {
    background: var(--dropdown-hover-bg);
    border-color: var(--bs-border-color-translucent);
    transform: none; /* No scale - keep consistent */
}

/* FOCUS STATE - Accessibility and keyboard navigation */
.dropdown-base:focus,
.dropdown-button:focus,
.view-dropdown .btn:focus,
.column-dropdown .btn:focus,
.listpage-header-dropdown-button:focus {
    background: #ffffff;
    border-color: var(--dropdown-focus-border);
    box-shadow: var(--dropdown-focus-shadow);
    outline: 0;
}

/* ACTIVE/OPEN STATE - When dropdown is expanded */
.dropdown-base.active,
.dropdown-base[aria-expanded="true"],
.dropdown-button.active,
.view-dropdown .btn.active,
.column-dropdown .btn.active,
.listpage-header-dropdown.open .listpage-header-dropdown-button {
    background: #ffffff;
    border-color: var(--dropdown-focus-border);
    box-shadow: var(--dropdown-focus-shadow);
}

/* DISABLED STATE - Non-interactive dropdowns */
.dropdown-base:disabled,
.dropdown-base.disabled,
.dropdown-button:disabled,
.view-dropdown .btn:disabled,
.column-dropdown .btn:disabled,
.listpage-header-dropdown-button:disabled {
    background: var(--bs-light);
    border-color: var(--dropdown-border-color);
    color: var(--bs-secondary);
    cursor: not-allowed;
    opacity: 0.65;
}

/* DROPDOWN MENU STANDARDS */
.dropdown-menu,
.listpage-header-dropdown-menu {
    min-width: 200px;
    max-width: 350px;
    padding: 0.5rem 0;
    border: 1px solid var(--dropdown-border-color);
    border-radius: var(--dropdown-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background: #ffffff;
    z-index: 1050;
    max-height: 300px; /* Prevent extremely tall menus */
    overflow-y: auto; /* Scroll for long lists */
}

/* DROPDOWN MENU ITEMS */
.dropdown-item,
.listpage-header-dropdown-item {
    font-size: 0.875rem; /* Slightly smaller than button for hierarchy */
    font-weight: 400;
    color: var(--bs-body-color);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* CRITICAL: Left alignment for professional appearance */
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    line-height: 1.4;
}

.dropdown-item:hover,
.listpage-header-dropdown-item:hover {
    background: var(--bs-light);
    color: var(--bs-body-color);
}

.dropdown-item:focus,
.listpage-header-dropdown-item:focus {
    background: var(--bs-primary);
    color: var(--bs-white);
    outline: none;
}

.dropdown-item.active,
.listpage-header-dropdown-item.active {
    background: var(--bs-primary);
    color: var(--bs-white);
    font-weight: 500;
}

.dropdown-item:disabled,
.listpage-header-dropdown-item:disabled {
    color: var(--bs-secondary);
    cursor: not-allowed;
    opacity: 0.5;
}

.dropdown-item:disabled:hover,
.listpage-header-dropdown-item:disabled:hover {
    background: transparent;
    color: var(--bs-secondary);
}

/* ========================================
   END GLOBAL DROPDOWN DESIGN SYSTEM
   ======================================== */

/* Control labels */
.view-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    margin-bottom: 0;
}

/* Legacy Dropdown Button Typography and Arrow - Now handled by Global Dropdown Design System above */
/* Component-specific positioning for dropdown menus */
.listpage-header-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
}

/* Right-aligned dropdown for column selector (rightmost element) */
.listpage-header-dropdown.column-dropdown .listpage-header-dropdown-menu {
    left: auto;
    right: 0;
    min-width: 250px;
}

/* =====================================================================
   ViewPage Design System - Three-Line Header Component
   ===================================================================== */

/* ViewPage Header - Main Container */
.viewpage-header {
    /* Inherits section-frame styles for consistent card appearance */
}

/* Header Line Base Styles */
.header-line {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.header-line:last-child {
    margin-bottom: 0;
}

/* Line 1: Navigation & Actions */
.navigation-line {
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.navigation-left {
    display: flex;
    align-items: center;
}

.navigation-center {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 1rem;
}

.page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #445566;
    margin: 0;
    line-height: 1.2;
}

.navigation-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Line 2: Entity Information */
.entity-line {
    margin-bottom: 0.75rem;
}

.entity-content {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.entity-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #445566;
    margin: 0;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.entity-id {
    font-size: 0.875rem;
    color: #6B7280;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background-color: #F3F4F6;
    border-radius: 6px;
}

/* Line 3: Styled Metadata */
.metadata-line {
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid #E5E7EB;
}

.metadata-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.metadata-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Responsive Design - Tablet */
@media (max-width: 1023px) {
    .page-title {
        font-size: 1.375rem;
    }
    
    .entity-name {
        font-size: 1.75rem;
    }
    
    .metadata-left {
        gap: 1rem;
    }
    
    .navigation-center {
        margin-left: 0.5rem;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 767px) {
    .navigation-line {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .navigation-center {
        order: -1;
        flex: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 0.5rem;
    }
    
    .page-title {
        font-size: 1.25rem;
    }
    
    .entity-name {
        font-size: 1.5rem;
    }
    
    .entity-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .metadata-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .metadata-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
    }
    
    .metadata-right {
        width: 100%;
        justify-content: flex-start;
    }
    
    .navigation-right {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Accessibility Enhancements */
.viewpage-header-title h1:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* ViewPage Status - Health Indicator Boxes */
.viewpage-status-content {
    /* No additional padding - section-frame provides the 20px padding */
}

.health-indicator-box {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.health-indicator-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.health-indicator-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.health-indicator-icon {
    font-size: 24px;
    color: #6B7280;
    flex-shrink: 0;
    margin-top: 4px;
}

.health-indicator-content {
    flex: 1;
}

.health-indicator-label {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    margin-bottom: 8px;
    line-height: 1.2;
}

.health-indicator-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 4px;
}

.health-indicator-status {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.2;
}

.health-indicator-separator {
    height: 1px;
    background: #E5E7EB;
    margin: 16px 0;
}

.health-indicator-details {
    font-size: 14px;
    color: #374151;
}

.health-details .detail-line {
    padding: 2px 0;
    line-height: 1.4;
}

/* Status Border Colors - 3px top and bottom borders */
.health-indicator-box--green {
    border-top: 3px solid #28A745;
    border-bottom: 3px solid #28A745;
}

.health-indicator-box--yellow {
    border-top: 3px solid #FFC107;
    border-bottom: 3px solid #FFC107;
}

.health-indicator-box--red {
    border-top: 3px solid #DC3545;
    border-bottom: 3px solid #DC3545;
}

.health-indicator-box--gray {
    border-top: 3px solid #6C757D;
    border-bottom: 3px solid #6C757D;
}

/* Expanded state styling */
.health-indicator-box--expanded {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .health-indicator-box {
        margin-bottom: 16px;
    }
    
    .health-indicator-main {
        gap: 12px;
    }
    
    .health-indicator-icon {
        font-size: 20px;
    }
    
    .health-indicator-value {
        font-size: 14px;
    }
}

/* FormSection Component Styles */
.form-section {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: slideInStagger 300ms ease-out backwards;
    transition: all 200ms ease-in-out;
    margin-bottom: 1.5rem;
}

.form-section:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-section:nth-child(1) { animation-delay: 0ms; }
.form-section:nth-child(2) { animation-delay: 100ms; }
.form-section:nth-child(3) { animation-delay: 200ms; }
.form-section:nth-child(4) { animation-delay: 300ms; }
.form-section:nth-child(5) { animation-delay: 400ms; }

@keyframes slideInStagger {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #1F2937;
    margin-bottom: 16px;
}

/* Responsive adjustments for FormSection */
@media (max-width: 768px) {
    .form-section {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .form-section .section-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
}

/* =====================================================================
   Composable Tab System CSS Framework
   Based on design-composable-tab-system.md
   ===================================================================== */

/* Container Level */
.viewpage-tab-container {
    position: relative;
}

/* Loading States */
.viewpage-tab-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

/* Header Components */
.viewpage-tab-header {
    margin-bottom: 1.5rem;
}

.viewpage-tab-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.viewpage-tab-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viewpage-tab-icon {
    font-size: 1.25rem;
}

.viewpage-tab-count {
    font-size: 1.1rem;
    color: var(--bs-secondary);
    font-weight: 500;
}

.viewpage-tab-grouping {
    margin-bottom: 1rem;
}

.viewpage-tab-grouping .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

/* Empty State */
.viewpage-tab-empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--bs-secondary);
}

.viewpage-tab-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.viewpage-tab-empty-state h4 {
    color: var(--bs-dark);
    margin-bottom: 0.5rem;
}

.viewpage-tab-empty-state p {
    margin-bottom: 1.5rem;
}

/* Content Display */
.viewpage-tab-content {
    /* Base container for all content */
}

.viewpage-tab-no-items {
    text-align: center;
    padding: 2rem;
}

.viewpage-tab-group {
    margin-bottom: 2rem;
}

.viewpage-tab-group-title {
    color: var(--bs-dark);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.viewpage-tab-group-count {
    font-weight: normal;
    color: var(--bs-secondary);
    font-size: 0.9rem;
}

/* Card Display */
.viewpage-tab-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.viewpage-tab-card {
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.viewpage-tab-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Row Display */
.viewpage-tab-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.viewpage-tab-row {
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.viewpage-tab-row:hover {
    background-color: var(--bs-light);
}

/* Default Item Display Template */
.default-item-display {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.default-item-display .text-muted {
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .viewpage-tab-cards {
        grid-template-columns: 1fr;
    }
    
    .viewpage-tab-summary {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .viewpage-tab-empty-state {
        padding: 2rem 1rem;
    }
    
    .viewpage-tab-empty-icon {
        font-size: 3rem;
    }
    
    .viewpage-tab-grouping {
        margin-bottom: 1.5rem;
    }
}