/**
 * SynX Economy - Components
 * 
 * Hub de importação de todos os componentes reutilizáveis
 * Organização modular para melhor manutenção
 * 
 * @version 2.0.0
 * @architecture Componentized CSS Architecture
 * 
 * Estrutura:
 * components/
 * ├── button.css     - Botões e variantes
 * ├── form.css       - Formulários e inputs
 * ├── card.css       - Cards e containers
 * ├── table.css      - Tabelas e paginação
 * ├── modal.css      - Modais e dialogs
 * ├── chart.css      - Gráficos e visualizações
 * ├── calendar.css   - Calendário e date picker
 * ├── badge.css      - Badges e tags
 * ├── alert.css      - Alertas e mensagens
 * ├── avatar.css     - Avatares e imagens de perfil
 * ├── dropdown.css   - Menus dropdown
 * ├── toast.css      - Notificações toast
 * ├── tabs.css       - Navegação por abas
 * └── skeleton.css   - Loading placeholders
 */

/* ============================================
   COMPONENT IMPORTS
   ============================================ */

@import url('./components/button.css');
@import url('./components/form.css');
@import url('./components/card.css');
@import url('./components/table.css');
@import url('./components/modal.css');
@import url('./components/chart.css');
@import url('./components/calendar.css');
@import url('./components/badge.css');
@import url('./components/alert.css');
@import url('./components/avatar.css');
@import url('./components/dropdown.css');
@import url('./components/toast.css');
@import url('./components/tabs.css');
@import url('./components/skeleton.css');

/* ============================================
   EMAIL STEPPER (PROFILE)
   Special component for email change workflow
   ============================================ */

.email-stepper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.email-stepper-indicators {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.email-stepper-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 70px;
    position: relative;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.email-stepper-indicator .step-number,
.email-stepper-indicator .step-check {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
}

.email-stepper-indicator .step-check {
    display: none;
    background: var(--color-neon-green);
    color: var(--color-bg-primary);
    border-color: var(--color-neon-green);
}

.email-stepper-indicator.active .step-number {
    background: rgba(0, 255, 65, 0.15);
    border-color: var(--color-neon-green);
    color: var(--color-neon-green);
    box-shadow: 0 0 0 4px rgba(0, 255, 65, 0.12);
}

.email-stepper-indicator.complete .step-number {
    display: none;
}

.email-stepper-indicator.complete .step-check {
    display: flex;
}

.email-stepper-connector {
    flex: 1;
    height: 3px;
    background: var(--color-border);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}

.email-stepper-connector::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--color-neon-green);
    transition: width 0.3s ease;
}

.email-stepper-connector.complete::after {
    width: 100%;
}

.email-stepper-content {
    position: relative;
}

.email-step-panel {
    display: none;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.email-step-panel.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.email-step-panel h4 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
    text-align: center;
}

.email-step-panel p,
.email-step-panel .text-secondary,
.email-step-panel .form-hint {
    text-align: center;
}

.email-step-panel .form-hint {
    display: block;
    width: 100%;
}

.email-step-panel .form-label {
    text-align: center;
    display: block;
}

/* ============================================
   GLOBAL ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}