/**
 * Advanced Statistics Styles
 * 
 * Componentes específicos para a página de estatísticas avançadas.
 * Segue metodologia BEM e Mobile First approach.
 * Usa CSS Custom Properties para consistência com design system.
 * 
 * Dependencies: main.css (base system)
 * 
 * Components:
 * - period-filter: Filtro de período de análise
 * - funnel: Visualização de funil de conversão
 * - plan-breakdown: Breakdown de vendas por plano
 * - behavior-chart: Gráficos de comportamento do usuário
 * - time-series: Gráfico de série temporal
 */

/* ==========================================================================
   PERIOD FILTER
   ========================================================================== */

.period-filter {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, 8px);
    padding: var(--spacing-lg, 1.5rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.period-filter__title {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: var(--spacing-md, 1rem);
    color: var(--color-text-primary);
}

.period-filter__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
    margin-bottom: var(--spacing-md, 1rem);
}

.period-filter__info {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #666);
    margin-top: var(--spacing-sm, 0.5rem);
}

/* Mobile First - Small Screens */
@media (min-width: 640px) {
    .period-filter__controls {
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   STATS CONTAINER VARIANTS
   ========================================================================== */

.stats-container--grid-2 {
    grid-template-columns: 1fr;
}

.stats-container--grid-3 {
    grid-template-columns: 1fr;
}

.stats-container--grid-4 {
    grid-template-columns: 1fr;
}

/* Tablet */
@media (min-width: 768px) {
    .stats-container--grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-container--grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-container--grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .stats-container--grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-container--grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   STAT CARD VARIANTS
   ========================================================================== */

.stat-card--highlight {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #0284c7 100%);
    color: #ffffff;
    border: 2px solid #22d3ee;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
}

.stat-card--highlight .stat-label,
.stat-card--highlight .stat-value,
.stat-card--highlight .stat-description {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   FUNNEL (Funil de Conversão)
   ========================================================================== */

.funnel {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, 8px);
    padding: var(--spacing-lg, 1.5rem);
}

.funnel__step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--spacing-sm, 0.5rem);
    transition: transform var(--transition-base, 250ms), box-shadow var(--transition-base, 250ms);
}

.funnel__step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 15px rgba(6, 182, 212, 0.15);
    border-color: var(--color-accent);
}

.funnel__step--final {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: 2px solid #34d399;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3), 0 4px 6px rgba(0, 0, 0, 0.3);
}

.funnel__step--final .funnel__step-label,
.funnel__step--final .funnel__step-value,
.funnel__step--final .funnel__step-rate {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.funnel__step-number {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    color: #ffffff;
    border-radius: var(--border-radius-full, 50%);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-lg, 1.25rem);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.funnel__step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.funnel__step-label {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary);
}

.funnel__step-value {
    font-size: var(--font-size-2xl, 1.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: #22d3ee;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
}

.funnel__step-rate {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium, 500);
}

.funnel__arrow {
    text-align: center;
    font-size: var(--font-size-2xl, 1.875rem);
    color: var(--color-accent);
    margin: var(--spacing-xs, 0.25rem) 0;
}

.funnel__insight {
    margin-top: var(--spacing-lg, 1.5rem);
    padding: var(--spacing-md, 1rem);
    background: rgba(251, 191, 36, 0.15);
    border-left: 4px solid #fbbf24;
    border-radius: var(--border-radius-sm, 4px);
    font-size: var(--font-size-sm, 0.875rem);
    color: #fef3c7;
}

.funnel__insight strong {
    color: #fcd34d;
}

/* Tablet & Desktop */
@media (min-width: 768px) {
    .funnel__step {
        flex-direction: row;
    }

    .funnel__step-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   PLAN BREAKDOWN
   ========================================================================== */

.plan-breakdown {
    margin-top: var(--spacing-lg, 1.5rem);
    display: grid;
    gap: var(--spacing-md, 1rem);
    grid-template-columns: 1fr;
}

.plan-breakdown__item {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm, 4px);
    padding: var(--spacing-md, 1rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color var(--transition-base);
}

.plan-breakdown__item:hover {
    border-color: var(--color-border-light);
}

.plan-breakdown__name {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary);
    text-transform: capitalize;
}

.plan-breakdown__stats {
    display: flex;
    gap: var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.plan-breakdown__revenue,
.plan-breakdown__quantity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.plan-breakdown__label {
    color: var(--color-text-muted, #666);
    font-size: var(--font-size-xs, 0.75rem);
}

.plan-breakdown__value {
    font-weight: var(--font-weight-bold, 700);
    color: #22d3ee;
}

/* Tablet */
@media (min-width: 768px) {
    .plan-breakdown {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   BEHAVIOR CHARTS
   ========================================================================== */

.behavior-charts {
    display: grid;
    gap: var(--spacing-lg, 1.5rem);
    margin-top: var(--spacing-lg, 1.5rem);
    grid-template-columns: 1fr;
}

.behavior-chart {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, 8px);
    padding: var(--spacing-lg, 1.5rem);
}

.behavior-chart h4 {
    font-size: var(--font-size-md, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--spacing-md, 1rem);
    color: var(--color-text-primary);
}

/* Desktop */
@media (min-width: 1024px) {
    .behavior-charts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   CHART CONTAINER
   ========================================================================== */

.chart-container {
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm, 4px);
    padding: var(--spacing-md, 1rem);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

.chart-container--large {
    min-height: 400px;
}

.chart-container__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.chart-container__bar-value {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary);
}

.chart-container__bar-visual {
    width: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #06b6d4 100%);
    border-radius: var(--border-radius-sm, 4px);
    transition: background var(--transition-base, 250ms), box-shadow var(--transition-base, 250ms);
}

.chart-container__bar-visual:hover {
    background: linear-gradient(180deg, #2563eb 0%, #0891b2 100%);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.chart-container__bar-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #666);
}

/* ==========================================================================
   TIME SERIES CONTROLS
   ========================================================================== */

.time-series-controls {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    margin-bottom: var(--spacing-md, 1rem);
    flex-wrap: wrap;
}

/* Mobile First */
@media (min-width: 640px) {
    .time-series-controls {
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.u-text-success {
    color: var(--color-success, #10b981) !important;
}

.u-text-danger {
    color: var(--color-danger, #ef4444) !important;
}

.u-text-warning {
    color: var(--color-warning, #f59e0b) !important;
}

/* ==========================================================================
   RESPONSIVE - ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .funnel__step {
        transition: none;
    }

    .chart-container__bar-visual {
        transition: none;
    }
}