/* ========================================
   CST Dashboard - Estilos consolidados
   Usado em: Dashboard CST sections
   ======================================== */

/* ========================================
   KPIS SECTION
   Usado em: DashboardKPIsSection.razor
   ======================================== */

/* === HERO KPI === */
.hero-kpi {
    border-radius: 16px;
    overflow: hidden;
}

.hero-gradient {
    background: var(--cst-hero-gradient);
    padding: var(--cst-spacing-md) var(--cst-spacing-lg);
    position: relative;
    color: white;
}

/* Garante que todos os textos dentro do hero gradient herdem cor clara */
.hero-gradient span,
.hero-gradient .mud-typography {
    color: inherit;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, var(--cst-white-alpha-10) 0%, transparent 70%);
    pointer-events: none;
}

.hero-main {
    color: white;
    position: relative;
    z-index: 1;
}

.hero-label {
    color: var(--cst-white-alpha-70);
    font-size: 11px;
    letter-spacing: 1px;
}

.hero-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hero-value .currency {
    font-size: 22px;
    font-weight: 400;
    color: var(--cst-white-alpha-90);
}

.hero-value .amount {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: white;
}

/* === PULSE METRICS === */
.pulse-metric {
    background: var(--cst-white-alpha-10);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid var(--cst-white-alpha-20);
    transition: all 0.3s ease;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pulse-metric:hover {
    background: var(--cst-white-alpha-20);
    transform: translateY(-2px);
}

.pulse-metric .pulse-value {
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
    color: white;
}

.pulse-metric .pulse-label {
    font-size: 9px;
    color: var(--cst-white-alpha-70) !important;
    margin-top: 1px;
}

/* Garante cor clara para ícones dentro de pulse-metric */
.pulse-metric .mud-icon-root {
    color: var(--cst-white-alpha-85) !important;
}

/* === VARIACAO CHIP === */
.variacao-chip {
    background: var(--cst-white-alpha-20) !important;
    color: white !important;
}

.variacao-chip.up {
    background: var(--cst-success-alpha-30) !important;
}

.variacao-chip.down {
    background: var(--cst-danger-alpha-30) !important;
}

/* === KPI CARD === */
.kpi-card {
    background: white;
    border-radius: var(--cst-radius-lg);
    padding: var(--cst-spacing-lg);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--cst-shadow-sm);
    transition: all var(--cst-transition-slow);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cst-shadow-md);
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 12px;
    color: var(--cst-neutral-600);
    font-weight: 500;
}

.kpi-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--cst-neutral-900);
}

.kpi-percent {
    font-size: 11px;
    color: var(--cst-neutral-400);
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--cst-shadow-primary);
}

/* === TOOLTIP ESTILIZADO === */
.tooltip-custos {
    min-width: 320px;
    padding: var(--cst-spacing-lg);
    background: var(--cst-tooltip-dark-gradient);
    border-radius: var(--cst-radius-lg);
    box-shadow: var(--cst-shadow-lg);
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cst-white-alpha-70);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tooltip-valor-total {
    font-size: 28px;
    font-weight: 800;
    color: var(--cst-success-light);
    text-shadow: 0 2px 10px var(--cst-success-alpha-30);
    margin-bottom: 12px;
}

.tooltip-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cst-white-alpha-20), transparent);
    margin: 12px 0;
}

.tooltip-categorias {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--cst-white-alpha-10);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.tooltip-item:hover {
    background: var(--cst-white-alpha-10);
    transform: translateX(4px);
}

.tooltip-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tooltip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

.tooltip-item-header span:last-child {
    color: var(--cst-white-alpha-90);
    font-size: 13px;
    font-weight: 500;
}

.tooltip-item-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tooltip-item-valor {
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.tooltip-item-percent {
    color: var(--cst-white-alpha-50);
    font-size: 11px;
}

.tooltip-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cst-white-alpha-20);
    color: var(--cst-white-alpha-50);
    font-size: 11px;
}

.tooltip-footer .mud-icon-root {
    color: var(--cst-warning);
}

/* Override MudBlazor tooltip styles */
:deep(.mud-tooltip) {
    background: transparent !important;
    box-shadow: none !important;
}

/* ========================================
   RANKING SECTION
   Usado em: DashboardRankingSection.razor
   ======================================== */

.ranking-list {
    flex: 1;
    max-height: 340px;
    overflow-y: auto;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: var(--cst-spacing-md);
    padding: 10px var(--cst-spacing-md);
    border-radius: var(--cst-radius-md);
    background: var(--cst-neutral-50);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all var(--cst-transition-normal);
}

.ranking-item:hover {
    background: var(--cst-neutral-100);
    transform: translateX(4px);
}

.ranking-gold {
    background: var(--cst-medal-gold-bg-gradient);
    border-left: 4px solid var(--cst-medal-gold);
}

.ranking-silver {
    background: var(--cst-medal-silver-bg-gradient);
    border-left: 4px solid var(--cst-medal-silver);
}

.ranking-bronze {
    background: var(--cst-medal-bronze-bg-gradient);
    border-left: 4px solid var(--cst-medal-bronze);
}

.ranking-ineficiente {
    border-left: 3px solid var(--cst-danger);
}

.ranking-eficiente {
    border-left: 3px solid var(--cst-success);
}

.ranking-position {
    width: 28px;
    height: 28px;
    border-radius: var(--cst-radius-full);
    background: var(--cst-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.ranking-gold .ranking-position {
    background: var(--cst-medal-gold);
    color: var(--cst-neutral-900);
}

.ranking-silver .ranking-position {
    background: var(--cst-medal-silver);
}

.ranking-bronze .ranking-position {
    background: var(--cst-medal-bronze);
}

.ranking-info {
    flex: 1;
    min-width: 0;
}

.ranking-codigo {
    font-weight: 600;
    font-size: 13px;
    color: var(--cst-neutral-900);
}

.ranking-descricao {
    font-size: 11px;
    color: var(--cst-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-valores {
    text-align: right;
    flex-shrink: 0;
}

.ranking-valor {
    font-weight: 700;
    font-size: 13px;
    color: var(--cst-neutral-900);
}

.ranking-valor.eficiente {
    color: var(--cst-success);
}

.ranking-percentual,
.ranking-tons {
    font-size: 11px;
    color: var(--cst-neutral-400);
}

/* ========================================
   EVOLUCAO SECTION
   Usado em: DashboardEvolucaoSection.razor
   ======================================== */

.evolucao-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--cst-radius-md);
    background: var(--cst-neutral-100);
}

.evolucao-stat.maior {
    background: var(--cst-warning-bg);
}

.evolucao-stat.maior .mud-icon-root {
    color: var(--cst-warning-dark);
}

.evolucao-stat.menor {
    background: var(--cst-success-bg);
}

.evolucao-stat.menor .mud-icon-root {
    color: var(--cst-success-dark);
}

.stat-label {
    font-size: 10px;
    color: var(--cst-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-valor {
    font-size: 14px;
    font-weight: 700;
    color: var(--cst-neutral-900);
}

/* ========================================
   COMPARATIVO SECTION
   Usado em: DashboardComparativoSection.razor
   ======================================== */

.resumo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: var(--cst-radius-md);
}

.resumo-item.eficiente {
    background: var(--cst-success-bg);
    border-left: 3px solid var(--cst-success);
}

.resumo-item.eficiente .mud-icon-root {
    color: var(--cst-success);
}

.resumo-item.ineficiente {
    background: var(--cst-danger-bg);
    border-left: 3px solid var(--cst-danger);
}

.resumo-item.ineficiente .mud-icon-root {
    color: var(--cst-danger);
}

.resumo-label {
    font-size: 10px;
    color: var(--cst-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resumo-valor {
    font-size: 13px;
    font-weight: 600;
    color: var(--cst-neutral-900);
}

.resumo-detalhe {
    font-size: 11px;
    color: var(--cst-neutral-600);
}

/* ========================================
   ALERTAS SECTION
   Usado em: DashboardAlertasSection.razor
   ======================================== */

.alerta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--cst-radius-md);
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    transition: all var(--cst-transition-normal);
}

.alerta-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cst-shadow-md);
}

.alerta-info {
    background: linear-gradient(135deg, var(--cst-info-bg) 0%, var(--cst-info-bg-light) 100%);
    border-left: 3px solid var(--cst-info);
}

.alerta-info .mud-icon-root {
    color: var(--cst-info-dark);
}

.alerta-atencao {
    background: linear-gradient(135deg, var(--cst-warning-bg) 0%, var(--cst-secondary-bg-light) 100%);
    border-left: 3px solid var(--cst-warning);
}

.alerta-atencao .mud-icon-root {
    color: var(--cst-secondary-dark);
}

.alerta-critico {
    background: linear-gradient(135deg, var(--cst-danger-bg) 0%, var(--cst-danger-light) 100%);
    border-left: 3px solid var(--cst-danger);
}

.alerta-critico .mud-icon-root {
    color: var(--cst-danger-dark);
}

.alerta-sucesso {
    background: linear-gradient(135deg, var(--cst-success-bg) 0%, var(--cst-success-light) 100%);
    border-left: 3px solid var(--cst-success);
}

.alerta-sucesso .mud-icon-root {
    color: var(--cst-success-dark);
}

.alerta-content {
    flex: 1;
    min-width: 0;
}

.alerta-titulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--cst-neutral-900);
}

.alerta-mensagem {
    font-size: 11px;
    color: var(--cst-neutral-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alerta-variacao {
    font-weight: 700;
    font-size: 11px !important;
}

.alerta-variacao.up {
    background: var(--cst-danger-alpha-20) !important;
    color: var(--cst-danger-dark) !important;
}

.alerta-variacao.down {
    background: var(--cst-success-alpha-20) !important;
    color: var(--cst-success-dark) !important;
}

/* ========================================
   SKELETON LOADER
   Usado em: DashboardSkeletonLoader.razor
   ======================================== */

.skeleton-container {
    animation: fadeIn 0.3s ease-out;
}

.skeleton-hero {
    background: linear-gradient(135deg, var(--cst-neutral-200) 0%, var(--cst-neutral-300) 100%);
    padding: 24px;
}

.skeleton-pulse {
    background: linear-gradient(90deg, var(--cst-white-alpha-10) 25%, var(--cst-white-alpha-30) 50%, var(--cst-white-alpha-10) 75%);
    background-size: 200% 100%;
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-pulse-card {
    background: var(--cst-white-alpha-10);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skeleton-ranking-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: var(--cst-radius-md);
    background: var(--cst-neutral-50);
    margin-bottom: 8px;
}

@keyframes pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

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