/* ============================================
   CST Design System - Equipamento Analitico
   Estilos especificos do relatorio de equipamentos
   ============================================ */

/* ===== Container da Lista de Equipamentos ===== */
.lista-equipamentos-container {
    position: relative;
    min-height: 400px;
}

/* ===== Overlay de Renderizacao (Local - dentro da area de conteudo) ===== */
.overlay-renderizacao-local {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: var(--cst-white-alpha-90);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    z-index: 100;
    border-radius: 12px;
    animation: cstFadeIn 0.2s ease-out;
}

/* ===== Filtro por Categoria - Destaque/Opacidade ===== */
.categoria-opaca {
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.filtro-categorias-chips {
    overflow-x: auto;
}

.filtro-categorias-chips .mud-chip {
    white-space: nowrap;
}

/* ===== Indicador de Variacao vs Media ===== */
.indicador-variacao {
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: super;
    text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

/* ===== Cards de Equipamento ===== */
.equipamento-card {
    transition: all 0.2s ease;
    border-radius: 12px;
}

.equipamento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== Tabela Detalhada ===== */
.tabela-detalhada {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cst-neutral-200);
}

.tabela-detalhada .mud-table-container {
    max-height: calc(100vh - 400px);
}

.tabela-detalhada .mud-table-head th {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 8px 12px;
}

.tabela-detalhada .mud-table-body td {
    font-size: 0.8rem;
    padding: 6px 12px;
}

.tabela-detalhada .mud-table-foot th {
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 8px 12px;
}

.tabela-detalhada .mud-table-row:hover td {
    background: var(--cst-primary-alpha-08) !important;
}

/* ===== LAYOUT MODERNO ===== */

/* Card do Equipamento */
.equipamento-card-modern {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--cst-neutral-200);
    transition: all 0.2s ease;
}

.equipamento-card-modern:hover {
    box-shadow: var(--cst-shadow-primary);
}

/* Hero Section do Equipamento */
.equipamento-hero {
    background: linear-gradient(135deg, var(--cst-primary) 0%, var(--cst-primary-darker) 50%, var(--cst-primary-dark) 100%);
    padding: 16px 20px;
    transition: background 0.2s ease;
}

.equipamento-hero:hover {
    background: linear-gradient(135deg, var(--cst-primary-hover) 0%, var(--cst-primary-darker) 50%, var(--cst-primary-dark) 100%);
}

/* Metricas no Hero */
.metricas-hero {
    gap: 8px;
}

.metrica-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 12px;
}

.metrica-box.destaque {
    background: var(--cst-white-alpha-20);
    border-radius: 8px;
    padding: 8px 16px;
}

.metrica-label {
    font-size: 10px;
    color: var(--cst-white-alpha-70);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.metrica-valor {
    font-size: 14px;
    color: white;
    font-weight: 700;
}

.metrica-valor.grande {
    font-size: 18px;
}

.hero-divider {
    width: 1px;
    height: 30px;
    background: var(--cst-white-alpha-20);
}

/* Badge de Ranking */
.ranking-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.ranking-badge.gold {
    background: linear-gradient(135deg, var(--cst-medal-gold) 0%, var(--cst-warning) 100%);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
    font-size: 18px;
}

.ranking-badge.silver {
    background: linear-gradient(135deg, var(--cst-medal-silver) 0%, var(--cst-neutral-600) 100%);
    box-shadow: 0 2px 8px rgba(158, 158, 158, 0.4);
    font-size: 18px;
}

.ranking-badge.bronze {
    background: linear-gradient(135deg, var(--cst-medal-bronze) 0%, var(--cst-medal-bronze-dark) 100%);
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
    font-size: 18px;
}

.ranking-badge.neutral {
    background: var(--cst-white-alpha-20);
    color: white;
}

/* Conteudo Expandido */
.equipamento-conteudo {
    padding: 16px;
    background: white;
    animation: cstSlideInUp 0.2s ease-out;
}

/* Secao de Categoria */
.categoria-section {
    background: var(--cst-neutral-100);
    border-radius: 8px;
    border: 1px solid var(--cst-neutral-200);
    transition: opacity 0.3s ease;
}

.categoria-indicador {
    width: 4px;
    height: 20px;
    border-radius: 2px;
}

/* Tabela de Movimentacoes */
.tabela-header th {
    background: var(--cst-primary) !important;
    color: white !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 12px !important;
    white-space: nowrap;
}

.tabela-row td {
    padding: 8px 12px !important;
    font-size: 12px;
    border-bottom: 1px solid var(--cst-neutral-100);
}

.tabela-row:hover td {
    background: var(--cst-primary-alpha-5) !important;
}

.tabela-footer td {
    background: var(--cst-primary-bg) !important;
    padding: 10px 12px !important;
    font-size: 12px;
}

/* ===== TABELA SINTETICA ===== */
.tabela-sintetica {
    border-radius: 8px;
    overflow: hidden;
}

.sintetico-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
}

.sintetico-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Header de Grupos */
.header-grupo th {
    padding: 8px 6px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 2px solid var(--cst-white-alpha-30);
}

.grupo-identificacao { background: var(--cst-primary-darker); color: white; }
.grupo-producao { background: var(--cst-primary-hover); color: white; }
.grupo-custos { background: var(--cst-primary-hover); color: white; }
.grupo-unitarios { background: var(--cst-primary-light); color: white; }
.grupo-rendimento { background: var(--cst-primary-muted); color: white; }

/* Header de Colunas */
.header-colunas th {
    padding: 6px 4px;
    font-weight: 600;
    font-size: 9px;
    text-align: center;
    white-space: nowrap;
}

.col-identificacao { background: var(--cst-primary); color: white; }
.col-producao { background: var(--cst-primary-hover); color: white; }
.col-custos { background: var(--cst-primary-light); color: white; }
.col-total { background: var(--cst-primary-dark); color: white; font-weight: 700; }
.col-unitarios { background: var(--cst-primary-light); color: white; }
.col-rendimento { background: var(--cst-primary-muted); color: white; }

/* Linhas de Dados */
.row-dados td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--cst-neutral-200);
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.row-dados:hover td {
    background: var(--cst-primary-bg) !important;
    color: var(--cst-primary-dark);
}

.row-dados td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Coluna TOTAL nas linhas de dados */
.row-dados td.col-total {
    background: var(--cst-primary);
    color: white;
    font-weight: 700;
}

.row-dados:hover td.col-total {
    background: var(--cst-primary-darker) !important;
    color: white !important;
}

/* Sticky Column */
.sticky-col {
    background: white;
    min-width: 180px;
}

.row-dados .sticky-col {
    background: var(--cst-neutral-50);
}

.row-dados:hover .sticky-col {
    background: var(--cst-primary-bg) !important;
    color: var(--cst-primary-dark);
}

/* Info do Equipamento na Tabela Sintetica */
.equip-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.equip-cod {
    font-weight: 700;
    font-size: 11px;
    color: var(--cst-neutral-800);
    display: block;
}

.equip-desc {
    font-size: 9px;
    color: var(--cst-neutral-600);
    display: block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-mini {
    font-size: 12px;
}

/* Linha de Total */
.row-total td {
    background: var(--cst-primary-dark);
    color: white;
    font-weight: 700;
    padding: 8px 4px;
}

.row-total td.col-total-geral {
    background: var(--cst-primary-darkest);
    color: var(--cst-cyan);
    font-size: 13px;
}

/* Checkbox de Comparacao */
.checkbox-comparacao {
    --mud-palette-primary: var(--cst-white-alpha-90);
}

.checkbox-comparacao .mud-checkbox-icon {
    color: var(--cst-white-alpha-85) !important;
}

.checkbox-comparacao .mud-checked .mud-checkbox-icon {
    color: var(--cst-cyan) !important;
}

/* ===== TRANSICOES SUAVES ===== */
.equipamento-card-modern,
.categoria-section,
.metrica-box {
    transition: all 0.2s ease;
}

/* ===== TOOLTIP SINTETICO ESTILIZADO ===== */
.tooltip-sintetico {
    min-width: 300px;
    padding: 16px;
    font-family: 'Segoe UI', sans-serif;
}

.tooltip-sintetico-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tooltip-sintetico-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cst-info-light);
}

.tooltip-sintetico-ranking {
    font-size: 20px;
}

.tooltip-sintetico-desc {
    font-size: 13px;
    color: var(--cst-neutral-400);
    margin-bottom: 14px;
    line-height: 1.4;
}

.tooltip-sintetico-eficiencia {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cst-white-alpha-10);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--cst-white-alpha-20);
}

.tooltip-sintetico-eficiencia-indicator {
    width: 8px;
    height: 48px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 10px currentColor;
}

.tooltip-sintetico-eficiencia-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-sintetico-eficiencia-status {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.tooltip-sintetico-eficiencia-desc {
    font-size: 13px;
    color: var(--cst-neutral-400);
    line-height: 1.4;
}

.tooltip-sintetico-metricas {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.tooltip-sintetico-metrica {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: rgba(79, 195, 247, 0.15);
    border-radius: 8px;
    padding: 10px 8px;
    border: 1px solid rgba(79, 195, 247, 0.25);
}

.tooltip-sintetico-metrica-label {
    font-size: 11px;
    color: var(--cst-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tooltip-sintetico-metrica-valor {
    font-size: 15px;
    font-weight: 700;
    color: var(--cst-info-light);
}

.tooltip-sintetico-acao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--cst-white-alpha-20);
    color: var(--cst-success-light);
    font-size: 14px;
    font-weight: 600;
}

.tooltip-sintetico-acao .mud-icon-root {
    font-size: 20px;
}

/* ===== LAYOUT ESTOQUE/FINANCEIRO ===== */
.equipamento-card-ef {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.equipamento-card-ef:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.equipamento-header-ef {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--cst-neutral-100) 0%, var(--cst-neutral-100) 100%);
    border-bottom: 1px solid var(--cst-neutral-200);
}

.ranking-badge-ef {
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--cst-neutral-200);
    color: var(--cst-neutral-600);
}

.ranking-badge-ef.gold {
    background: linear-gradient(135deg, var(--cst-medal-gold) 0%, var(--cst-medal-gold-dark) 100%);
    font-size: 18px;
}

.ranking-badge-ef.silver {
    background: linear-gradient(135deg, var(--cst-neutral-200) 0%, var(--cst-neutral-400) 100%);
    font-size: 18px;
}

.ranking-badge-ef.bronze {
    background: linear-gradient(135deg, var(--cst-medal-bronze-light) 0%, var(--cst-medal-bronze) 100%);
    font-size: 18px;
}

.eficiencia-badge-ef {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.total-badge-ef {
    background: linear-gradient(135deg, var(--cst-primary) 0%, var(--cst-primary-darker) 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: var(--cst-shadow-primary);
}

.equipamento-content-ef {
    padding: 20px;
}

.secao-estoque-ef,
.secao-financeiro-ef {
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.secao-estoque-ef {
    background: linear-gradient(180deg, var(--cst-info-bg) 0%, var(--cst-info-bg-light) 100%);
    border: 1px solid var(--cst-info-border);
}

.secao-financeiro-ef {
    background: linear-gradient(180deg, var(--cst-secondary-bg) 0%, var(--cst-secondary-bg-light) 100%);
    border: 1px solid var(--cst-secondary-border);
}

.secao-header-ef {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.secao-header-ef.estoque {
    background: var(--cst-info-header-gradient);
    color: white;
}

.secao-header-ef.financeiro {
    background: var(--cst-secondary-header-gradient);
    color: white;
}

.secao-titulo-ef {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.secao-percent-ef {
    font-size: 12px;
    opacity: 0.85;
    margin-right: 8px;
}

.secao-valor-ef {
    font-weight: 700;
    font-size: 15px;
}

.secao-body-ef {
    padding: 12px 16px;
    flex: 1;
}

.item-custo-ef {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.item-custo-ef:last-child {
    border-bottom: none;
}

.item-bullet-ef {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}

.item-nome-ef {
    flex: 1;
    font-size: 13px;
    color: var(--cst-neutral-800);
}

.item-valor-ef {
    font-weight: 600;
    font-size: 13px;
    color: var(--cst-neutral-800);
}

.sem-dados-ef {
    text-align: center;
    color: var(--cst-neutral-500);
    font-size: 13px;
    padding: 20px;
    font-style: italic;
}

.metricas-producao-ef {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.metrica-ef {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: white;
    border-radius: 6px;
}

.metrica-label-ef {
    display: block;
    font-size: 10px;
    color: var(--cst-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.metrica-valor-ef {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cst-neutral-800);
}

.custos-unitarios-ef {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.03);
}

.custo-unitario-ef {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: linear-gradient(135deg, var(--cst-primary) 0%, var(--cst-primary-dark) 100%);
    border-radius: 6px;
}

.custo-label-ef {
    display: block;
    font-size: 10px;
    color: var(--cst-white-alpha-85);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.custo-valor-ef {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: white;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 960px) {
    .metricas-hero {
        width: 100%;
        justify-content: flex-start;
        margin-top: 12px;
    }

    .metrica-box {
        padding: 4px 8px;
    }

    .metrica-valor {
        font-size: 12px;
    }

    .metrica-valor.grande {
        font-size: 14px;
    }

    .hero-divider {
        height: 20px;
    }
}

@media (max-width: 600px) {
    .equipamento-hero {
        padding: 12px;
    }

    .ranking-badge {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .ranking-badge.gold,
    .ranking-badge.silver,
    .ranking-badge.bronze {
        font-size: 14px;
    }
}

/* ===== ESTILOS DE IMPRESSAO ===== */
@media print {
    /* Oculta elementos nao imprimiveis */
    .toolbar-resultados,
    .checkbox-comparacao,
    .filtro-categorias-chips,
    .ranking-badge,
    .hero-divider,
    button,
    .mud-button,
    .mud-fab,
    .mud-drawer {
        display: none !important;
    }

    /* Ajusta o hero para impressao */
    .equipamento-hero {
        background: var(--cst-neutral-100) !important;
        padding: 8px 12px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .equipamento-hero * {
        color: var(--cst-neutral-800) !important;
    }

    .metrica-label {
        color: var(--cst-neutral-600) !important;
    }

    /* Expande todos os equipamentos */
    .equipamento-conteudo {
        display: block !important;
    }

    /* Ajusta tabelas */
    .tabela-header th {
        background: var(--cst-primary) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Remove animacoes */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Quebra de pagina entre equipamentos */
    .equipamento-card-modern {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}
