/* Global Error Overlay */
.error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    /* Light glass effect base */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.error-overlay.active {
    display: flex;
    opacity: 1;
}

.error-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform: translateY(20px);
    animation: slideUp 0.4s ease forwards;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
    }
}

.error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    transition: background-color 0.3s, color 0.3s;
}

.error-icon i {
    font-size: 40px;
}

.error-title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.error-message {
    margin: 0 0 20px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.error-detail {
    background: var(--bg-muted);
    padding: 10px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--ink-3);
    margin-bottom: 20px;
    text-align: left;
    max-height: 100px;
    overflow-y: auto;
    word-break: break-all;
    display: none;
    /* Hidden unless content added */
}

.error-retry-btn {
    background: var(--text-primary);
    color: var(--bg-card);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, background-color 0.2s;
}

.error-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Themes */

/* Network Issue - Neutral/Blue */
.theme-network .error-icon {
    background: var(--status-blue-bg);
    color: var(--status-blue-text);
}

/* Server Fault - Warning/Urgent (Orange/Red) */
.theme-server .error-icon {
    background: var(--s-pending-bg);
    color: var(--s-pending-fg);
}

/* Client Error - Red */
.theme-client .error-icon {
    background: var(--s-sold-bg);
    color: var(--red-primary);
}

/* Dark Mode Support (Basic) */
@media (prefers-color-scheme: dark) {
    /* If the app supports dark mode classes, use them. 
       Since we don't see robust dark mode in style.css root, 
       we'll stick to light mode or adapt if requested.
       The current CSS seems to define vars for light mode mostly.
    */
}