/**
 * GALES Auto-Save CSS
 * Estilos para o indicador de auto-save e lista de rascunhos
 *
 * @version 1.0.0
 */

/* =============================================================================
   INDICADOR DE STATUS
   ============================================================================= */

.gales-autosave-indicator {
    position: fixed;
    bottom: var(--spacing-4, 1rem);
    right: var(--spacing-4, 1rem);
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    background: var(--color-gray-100, #f3f4f6);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-700, #374151);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    z-index: 9999;
    transition: all 0.3s ease;
}

.gales-autosave-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gray-400, #9ca3af);
}

/* Status: Salvando */
.gales-autosave-saving .gales-autosave-icon {
    background: var(--color-warning-500, #f59e0b);
    animation: gales-autosave-pulse 1s infinite;
}

/* Status: Salvo */
.gales-autosave-saved .gales-autosave-icon {
    background: var(--color-success-500, #10b981);
}

.gales-autosave-saved {
    border-color: var(--color-success-300, #6ee7b7);
    background: var(--color-success-50, #ecfdf5);
    color: var(--color-success-700, #047857);
}

/* Status: Erro */
.gales-autosave-error .gales-autosave-icon {
    background: var(--color-danger-500, #ef4444);
}

.gales-autosave-error {
    border-color: var(--color-danger-300, #fca5a5);
    background: var(--color-danger-50, #fef2f2);
    color: var(--color-danger-700, #b91c1c);
}

@keyframes gales-autosave-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* =============================================================================
   LISTA DE RASCUNHOS (MODAL)
   ============================================================================= */

.gales-drafts-list {
    max-height: 400px;
    overflow-y: auto;
}

.gales-draft-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
    padding: var(--spacing-3, 0.75rem);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

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

.gales-draft-item:hover {
    background: var(--color-gray-50, #f9fafb);
}

.gales-draft-preview {
    flex: 1;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-700, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gales-draft-timestamp {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-gray-500, #6b7280);
    white-space: nowrap;
}

.gales-draft-actions {
    display: flex;
    gap: var(--spacing-1, 0.25rem);
}

.gales-draft-actions .btn {
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
    font-size: var(--text-xs, 0.75rem);
}

/* =============================================================================
   RESPONSIVIDADE
   ============================================================================= */

@media (max-width: 640px) {
    .gales-autosave-indicator {
        bottom: var(--spacing-2, 0.5rem);
        right: var(--spacing-2, 0.5rem);
        padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
        font-size: var(--text-xs, 0.75rem);
    }

    .gales-autosave-icon {
        width: 8px;
        height: 8px;
    }

    .gales-draft-item {
        flex-wrap: wrap;
    }

    .gales-draft-preview {
        width: 100%;
        margin-bottom: var(--spacing-2, 0.5rem);
    }

    .gales-draft-timestamp {
        flex: 1;
    }
}

/* =============================================================================
   DARK MODE (se suportado)
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    .gales-autosave-indicator {
        background: var(--color-gray-800, #1f2937);
        border-color: var(--color-gray-600, #4b5563);
        color: var(--color-gray-200, #e5e7eb);
    }

    .gales-autosave-saved {
        background: var(--color-success-900, #064e3b);
        border-color: var(--color-success-700, #047857);
        color: var(--color-success-200, #a7f3d0);
    }

    .gales-autosave-error {
        background: var(--color-danger-900, #7f1d1d);
        border-color: var(--color-danger-700, #b91c1c);
        color: var(--color-danger-200, #fecaca);
    }

    .gales-draft-item:hover {
        background: var(--color-gray-700, #374151);
    }
}