body { 
    font-family: Arial, sans-serif; 
    margin: 20px; 
    background-color: #f5f5f5; 
}


#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."
}

.container { 
    max-width: 1400px; 
    margin: 0 auto; 
    background-color: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    transition: opacity 0.2s ease-in-out;
}

h1 { 
    color: #333; 
    margin-bottom: 20px; 
    text-align: center; 
}

/* Summary Table */
.summary-section { 
    margin-bottom: 30px; 
}

.summary-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 20px; 
}

.summary-table th, .summary-table td { 
    border: 1px solid #ddd; 
    padding: 8px 12px; 
    text-align: center; 
}

.summary-table th { 
    background-color: #f8f9fa; 
    font-weight: bold; 
    color: #333; 
}

.summary-table tbody tr:nth-child(even) { 
    background-color: #f9f9f9; 
}

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

.total-row { 
    background-color: #e7f3ff !important; 
    font-weight: bold; 
}

/* Cards Grid */
.cards-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(580px, 600px)); 
    gap: 20px; 
    justify-content: center; 
    min-height: 200px; /* Prevents grid from collapsing */
}

.owner-card { 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    background-color: white; 
    transition: all 0.3s ease-in-out;
}

.owner-header { 
    background-color: #f8f9fa; 
    padding: 15px; 
    border-bottom: 1px solid #ddd; 
}

.owner-title { 
    font-size: 18px; 
    font-weight: bold; 
    color: #333; 
    margin: 0; 
}

.owner-summary { 
    font-size: 14px; 
    color: #666; 
    margin-top: 5px; 
}

.owner-content { 
    padding: 15px; 
    min-height: 100px; /* Prevents cards from jumping */
}

.active-tasks { 
    margin-bottom: 20px; 
}

.task-item { 
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6; 
    border-radius: 4px; 
    padding: 12px; 
    margin-bottom: 10px; 
    transition: all 0.2s ease-in-out;
}

.task-header { 
    font-weight: bold; 
    color: #495057; 
    margin-bottom: 8px; 
}

.task-details { 
    font-size: 13px; 
    color: #6c757d; 
}

.task-progress { 
    margin-top: 8px; 
}

.progress-item { 
    font-size: 12px; 
    color: #6c757d; 
    margin: 2px 0; 
    padding: 2px 0; 
    transition: all 0.3s ease-in-out;
}

.progress-item.current { 
    font-weight: bold; 
    color: #007bff; 
}

.progress-item.recent {
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
    padding-left: 8px;
    animation: highlight 3s ease-out;
}

.progress-timestamp {
    font-size: 10px;
    color: #6c757d;
    margin-right: 8px;
}

.duration { 
    font-weight: bold; 
    color: #28a745; 
    transition: color 0.2s ease-in-out;
}

.duration-short {
    color: #28a745; /* Green - under 1 minute */
}

.duration-medium {
    color: #ffc107; /* Yellow - 1-5 minutes */
}

.duration-long {
    color: #fd7e14; /* Orange - 5-15 minutes */
}

.duration-very-long {
    color: #dc3545; /* Red - over 15 minutes */
    font-weight: bold;
}

.no-tasks { 
    color: #999; 
    font-style: italic; 
    padding: 20px; 
    text-align: center; 
}

.last-updated { 
    text-align: center; 
    color: #666; 
    font-size: 12px; 
    margin-top: 20px; 
}

.stats { 
    display: inline-block; 
    margin-right: 20px; 
    transition: all 0.2s ease-in-out;
}

/* Header section with refresh button */
.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-section h1 {
    margin: 0;
}

.refresh-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.refresh-button:hover:not(:disabled) {
    background-color: #0056b3;
}

.refresh-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.real-time-indicator {
    color: #28a745;
    font-size: 12px;
    margin-left: 10px;
    animation: pulse 2s infinite;
}

.activity-indicator {
    color: #ff6b35;
    font-size: 12px;
    margin-left: 10px;
    animation: bounce 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
    60% { transform: translateY(-2px); }
}

/* Active Tasks Table */
.active-tasks-section {
    margin: 30px 0;
}

.active-tasks-section h2 {
    color: #333;
    margin-bottom: 15px;
    font-size: 20px;
}

.active-tasks-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 6px;
    overflow: hidden;
}

.active-tasks-table th,
.active-tasks-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.active-tasks-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.active-tasks-table tbody tr:hover {
    background-color: #f5f5f5;
}

.owner-cell {
    font-weight: bold;
    color: #007bff;
}

.table-cell {
    font-family: 'Courier New', monospace;
    background-color: #f8f9fa;
    border-radius: 3px;
    padding: 4px 8px;
}

.time-cell {
    font-family: 'Courier New', monospace;
    color: #666;
}

.duration-cell,
.last-activity-cell {
    font-weight: bold;
}

.status-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-status {
    background-color: #e3f2fd;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.no-status {
    color: #999;
    font-style: italic;
}

/* Last Activity Color Coding */
.activity-very-recent {
    color: #28a745;
    font-weight: bold;
}

.activity-recent {
    color: #20c997;
}

.activity-moderate {
    color: #ffc107;
}

.activity-old {
    color: #fd7e14;
}

.activity-very-old {
    color: #dc3545;
    font-weight: bold;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes highlight {
    0% { 
        background-color: #d4edda;
        border-left-color: #28a745;
    }
    100% { 
        background-color: #fff3cd;
        border-left-color: #ffc107;
    }
}

/* Global Overview */
.global-overview {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.global-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.global-overview-title {
    font-size: 16px;
    font-weight: 600;
}

.global-overview-stats {
    font-size: 24px;
    font-weight: bold;
}

.utilization-bar {
    width: 100%;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.utilization-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease-in-out, background-color 0.3s ease;
}

.utilization-fill.low {
    background-color: #4caf50;
}

.utilization-fill.medium {
    background-color: #ff9800;
}

.utilization-fill.high {
    background-color: #f44336;
}

.instance-dots {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.instance-dot-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.instance-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.instance-dot.healthy {
    background-color: #4caf50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

.instance-dot.stale {
    background-color: #f44336;
    box-shadow: 0 0 6px rgba(244, 67, 54, 0.6);
    animation: pulse-red 2s infinite;
}

.instance-dot.current {
    border: 2px solid #fff;
    width: 8px;
    height: 8px;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-bar select {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 13px;
    cursor: pointer;
}

.filter-bar input[type="text"] {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    min-width: 200px;
}

.filter-bar .clear-button {
    background: #6c757d;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s;
}

.filter-bar .clear-button:hover {
    background: #5a6268;
}

/* Instance Badge */
.instance-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background-color: #e3f2fd;
    color: #1565c0;
    white-space: nowrap;
}

.instance-badge.current-instance {
    background-color: #c8e6c9;
    color: #2e7d32;
}

/* Instance sub-columns in summary table */
.instance-sub-col {
    font-size: 12px;
    text-align: center;
    min-width: 70px;
}

.instance-sub-col .active-count {
    color: #1976d2;
    font-weight: bold;
}

.instance-sub-col .queued-count {
    color: #757575;
}

/* Table Locks Section */
.table-locks-section {
    margin: 20px 0;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.table-locks-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border: none;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: background-color 0.2s;
}

.table-locks-toggle:hover {
    background: #e9ecef;
}

.table-locks-toggle .toggle-icon {
    transition: transform 0.2s;
}

.table-locks-toggle.expanded .toggle-icon {
    transform: rotate(90deg);
}

.table-locks-content {
    border-top: 1px solid #dee2e6;
}

.table-locks-table {
    width: 100%;
    border-collapse: collapse;
}

.table-locks-table th,
.table-locks-table td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.table-locks-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #555;
    font-size: 13px;
}

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

/* Footer */
.dashboard-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.dashboard-footer .separator {
    color: #ccc;
}

/* Responsive design for active tasks table */
@media (max-width: 768px) {
    .active-tasks-table {
        font-size: 12px;
    }

    .active-tasks-table th,
    .active-tasks-table td {
        padding: 8px 4px;
    }

    .status-cell {
        max-width: 150px;
    }

    .active-tasks-section h2 {
        font-size: 18px;
    }

    .global-overview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar select,
    .filter-bar input[type="text"] {
        width: 100%;
    }

    .instance-dots {
        gap: 8px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-footer {
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-footer .separator {
        display: none;
    }
}