/**
 * ========================================
 * SHAREPOINT-DASHBOARD.CSS - Dashboard SharePoint
 * ========================================
 * 
 * Feature-specific CSS para o dashboard interativo do SharePoint
 * Exibido quando usuário seleciona aba "SharePoint Online"
 * 
 * Componentes:
 * - .sharepoint-dashboard - Container principal
 * - .stats-grid - Grid de estatísticas (Total Sites, Tamanho Total, etc)
 * - .stat-card - Cards individuais de estatísticas
 * - .category-distribution - Distribuição por categorias (Empty, Small, Medium, Large)
 * - .usage-overview - Visão geral de uso (barra de progresso)
 * 
 * Arquitetura BEM + Feature-based CSS
 * 
 * @created 2025-01-09
 * @source dashboard-premium.html linhas 1638-1772 (CSS inline no JavaScript)
 */

/* ========================================
   📦 SHAREPOINT DASHBOARD - Container Principal
   ======================================== */

/**
 * Container principal do dashboard SharePoint
 * Aparece dinamicamente acima da tabela quando serviço = 'sharepoint'
 * Glass morphism + border sutil
 */
.sharepoint-dashboard {
    /* Visual: vidro fosco */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Espaçamento */
    margin-bottom: 20px;
    padding: 20px;
    
    /* Forma */
    border-radius: 12px;
}

/* ========================================
   📊 STATS GRID - Grid de Estatísticas
   ======================================== */

/**
 * Grid responsivo para cards de estatísticas
 * Auto-fit: ajusta colunas automaticamente baseado no espaço
 * minmax(200px, 1fr): mínimo 200px, cresce igual
 */
.stats-grid {
    /* Grid responsivo */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    
    /* Espaçamento inferior */
    margin-bottom: 25px;
}

/* ========================================
   🎴 STAT CARD - Cards de Estatísticas
   ======================================== */

/**
 * Card individual de estatística
 * Layout: flexbox horizontal (ícone + conteúdo)
 * Hover: eleva e ilumina
 */
.stat-card {
    /* Visual: vidro fosco com border */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Layout: horizontal */
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* Espaçamento e forma */
    padding: 15px;
    border-radius: 8px;
    
    /* Transição suave */
    transition: all 0.3s ease;
}

/**
 * Hover: destaca o card
 * Background mais claro + elevação
 */
.stat-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/**
 * Modificador: Card de alerta (vermelho)
 * Usado quando há alertas críticos
 */
.stat-card.stat-alert {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ========================================
   🎯 STAT COMPONENTS - Elementos do Card
   ======================================== */

/**
 * Ícone do stat (emoji grande)
 * Ex: 🌐 📦 📊 ⚠️
 */
.stat-icon {
    font-size: 24px;
}

/**
 * Conteúdo do stat (valor + label)
 * Flex: 1 para ocupar espaço restante
 */
.stat-content {
    flex: 1;
}

/**
 * Valor numérico grande (ex: "1,234")
 * Bold branco com line-height compacto
 */
.stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

/**
 * Label descritivo (ex: "TOTAL DE SITES")
 * Uppercase + letter-spacing para premium look
 */
.stat-label {
    font-size: 12px;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   📂 CATEGORY DISTRIBUTION - Distribuição por Categorias
   ======================================== */

/**
 * Títulos das seções (Category Distribution e Usage Overview)
 */
.category-distribution h3, 
.usage-overview h3 {
    margin: 0 0 15px 0;
    color: #fff;
    font-size: 16px;
}

/**
 * Item individual de categoria
 * Ex: Empty (0), Small (<1 GB), Medium (1-10 GB), Large (>10 GB)
 */
.category-item {
    margin-bottom: 12px;
}

/**
 * Label da categoria (nome + contador)
 * Layout: flexbox space-between
 */
.category-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
}

/**
 * Nome da categoria (ex: "Small Sites")
 * Branco para contraste
 */
.category-name {
    color: #fff;
}

/**
 * Contador de sites (ex: "42 sites")
 * Cinza claro
 */
.category-count {
    color: #cbd5e1;
}

/* ========================================
   📊 CATEGORY BAR - Barras de Progresso por Categoria
   ======================================== */

/**
 * Container da barra de progresso
 * Background cinza escuro + border radius
 */
.category-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

/**
 * Preenchimento da barra (width dinâmico via JS)
 * Transição suave de 0.8s
 */
.category-fill {
    height: 100%;
    transition: width 0.8s ease;
}

/**
 * Cores por categoria:
 * - Empty: Cinza (#64748b)
 * - Small: Verde (#10b981)
 * - Medium: Laranja (#f59e0b)
 * - Large: Vermelho (#ef4444)
 */
.category-empty { background: #64748b; }
.category-small { background: #10b981; }
.category-medium { background: #f59e0b; }
.category-large { background: #ef4444; }

/* ========================================
   💾 USAGE OVERVIEW - Visão Geral de Uso
   ======================================== */

/**
 * Seção de visão geral de uso
 * Mostra: X GB utilizados de Y GB (Z%)
 */
.usage-overview {
    margin-top: 20px;
}

/**
 * Container da barra de uso principal
 * Glass morphism + padding generoso
 */
.usage-bar-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
}

/**
 * Info do uso (texto acima da barra)
 * Layout: flexbox space-between
 * Ex: "123.4 GB utilizados de 4270 GB" | "2.9%"
 */
.usage-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #cbd5e1;
}

/**
 * Barra de progresso principal
 * Background cinza escuro + altura 8px
 */
.usage-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

/**
 * Preenchimento da barra (width dinâmico via JS)
 * Transição suave de 1s
 */
.usage-fill {
    height: 100%;
    transition: width 1s ease;
}

/**
 * Cores por nível de uso:
 * - Normal (< 60%): Gradiente verde
 * - Warning (60-80%): Gradiente laranja
 * - Critical (> 80%): Gradiente vermelho
 */
.usage-normal { 
    background: linear-gradient(90deg, #10b981, #059669); 
}
.usage-warning { 
    background: linear-gradient(90deg, #f59e0b, #d97706); 
}
.usage-critical { 
    background: linear-gradient(90deg, #ef4444, #dc2626); 
}

/* ========================================
   ⚡ PERFORMANCE - Otimizações
   ======================================== */

/**
 * GPU acceleration para transições suaves
 * Contain hints para reduzir repaints
 */
.stat-card,
.category-fill,
.usage-fill {
    will-change: transform, width;
    transform: translateZ(0);
}

/**
 * Reduce layout calculations
 */
.stats-grid,
.sharepoint-dashboard {
    contain: layout style;
}

/* ========================================
   📱 RESPONSIVE - Mobile Adaptation
   ======================================== */

/**
 * Breakpoint: mobile (< 480px)
 * Grid com 1 coluna para melhor leitura
 */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .sharepoint-dashboard {
        padding: 15px;
    }
}

/* ========================================
   📝 NOTAS DE MANUTENÇÃO
   ======================================== */

/**
 * COMO USAR:
 * 1. Dashboard é injetado via JavaScript quando service = 'sharepoint'
 * 2. Dados vêm de: dashboardInstance.calculateSharePointStats(data)
 * 3. Categorias: Empty (0), Small (<1GB), Medium (1-10GB), Large (>10GB)
 * 4. Usage percent: baseado em totalQuotaGB = 4270 GB (4.27 TB tenant real)
 * 
 * DEPENDÊNCIAS:
 * - variables.css (--space-*, --text-*, --radius-*)
 * - JavaScript: PremiumDashboard.generateSharePointDashboardHTML()
 * 
 * ESTRUTURA HTML GERADA:
 * <div class="sharepoint-dashboard">
 *   <div class="stats-grid">
 *     <div class="stat-card">...</div>
 *   </div>
 *   <div class="category-distribution">...</div>
 *   <div class="usage-overview">...</div>
 * </div>
 * 
 * PERFORMANCE:
 * - GPU accelerated transitions (will-change + translateZ)
 * - Contain hints para layout efficiency
 * - Transições suaves: 0.3s (hover), 0.8s (barras), 1s (usage)
 */