/* css/utilities.css */

/* General action button - used in Review, Admin, AI Diagnostic */
.action-btn {
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit; /* Ensure font consistency */
    justify-content: center; /* Center content for full-width buttons */
}

.action-btn.primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color); /* Ensure border color matches if border is used */
}
.action-btn.primary:hover:not([disabled]) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.action-btn.secondary {
    background: var(--bg-card, white); /* Match card background or be slightly off-white */
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.action-btn.secondary:hover:not([disabled]) {
    background-color: rgba(102, 126, 234, 0.1); /* Light primary tint on hover */
    border-color: var(--primary-hover);
}

.action-btn.danger { /* For abort/delete actions */
    background-color: var(--error-color);
    color: white;
    border-color: var(--error-color);
}
.action-btn.danger:hover:not([disabled]) {
    background-color: #c5302c; /* Darker error color */
    border-color: #c5302c;
}

.action-btn.clear { /* Specific for "Clear Filters" or similar */
    background: var(--warning-color);
    color: white;
}

.action-btn:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.action-btn:disabled {
    background-color: var(--text-muted, #a0aec0) !important;
    border-color: var(--text-muted, #a0aec0) !important;
    color: #e2e8f0 !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Stats messages (Toast) */
.stats-message { /* This class is used by UIManager.showToast, kept for compatibility */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: var(--border-radius-sm);
    color: white;
    font-size: 0.9rem;
    z-index: 9999; /* Ensure it's above most elements */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0; /* Initial state for animation */
    transition: opacity 0.3s ease, bottom 0.3s ease;
    pointer-events: none; /* Initially not interactive */
}
/* UIManager.showToast will handle the fade in/out via direct style manipulation */
/* Class-based styling for different types, UIManager will set background-color directly */
.stats-message.success-toast-bg { background: var(--success-color); }
.stats-message.info-toast-bg { background: var(--primary-color); }
.stats-message.error-toast-bg { background: var(--error-color); }
.stats-message.warning-toast-bg { background: var(--warning-color); }


/* General spinner for loading states */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--primary-color);
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

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

/* Animation for content fading in */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for sliding in from top */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Storage Migration Success Toast */
.storage-migration-success {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--success-color), #48bb78);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(72, 187, 120, 0.3);
    z-index: 10000;
    font-size: 0.9rem;
    max-width: 300px;
    animation: slideInFromRight 0.5s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Empty state message styling (used in ReviewManager, UIManager) */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.8); /* Optional: for UIManager's empty state */
    border-radius: var(--border-radius-md); /* Optional: for UIManager's empty state */
}
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block; /* Ensure it's block for margin to work */
}
.empty-state h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.empty-state p { /* Ensure p tag within empty state is also styled if UIManager uses it */
    font-size: 1rem;
}