/* Layout Fixes for Kart Metrics - Responsive and Text Overflow Prevention */

/* ===== PLOTLY MODEBAR FIXES - Evitar colisão com títulos ===== */
/* Reduzir altura e padding do modebar para evitar cobrir títulos */
.modebar {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    height: auto !important;
    min-height: 32px !important;
}

.modebar-container {
    top: 0px !important;
    right: 0px !important;
}

/* Garantir que modebar não empurre layout para fora */
.modebar-group {
    padding: 2px 4px !important;
}

/* Ajustar posicionamento do modebar para não interferir com títulos */
.js-plotly-plot .plotly .modebar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
}

/* Garantir que o container do gráfico tenha espaço suficiente no topo */
.js-plotly-plot {
    padding-top: 0 !important;
}

/* ===== GLOBAL FOUNDATION ===== */
/* Ensure box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow at root level */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* ===== CONTAINER ARQUIVO A/B - Responsive Grid ===== */
/* Container principal dos uploads A e B */
/* Em mobile: empilhar verticalmente (1 coluna) */
/* Em desktop: lado a lado (2 colunas) */
#upload-files-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Em mobile: 1 coluna */
@media (max-width: 768px) {
    #upload-files-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Garantir que cada container interno não ultrapasse a largura */
    #upload-files-container > div {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ===== CARDS COMPARATIVO RÁPIDO (A vs B) - Responsive Grid ===== */
/* Container principal dos cards de comparação */
#quick-compare {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Grid interno dos cards */
#quick-compare-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Mobile: 1 coluna */
@media (max-width: 480px) {
    #quick-compare-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Tablet: 2 colunas */
@media (min-width: 481px) and (max-width: 768px) {
    #quick-compare-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/* Desktop: mantém 2 colunas */
@media (min-width: 769px) {
    #quick-compare-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/* Cada card individual (_metric_row) - Prevenir overflow e sobreposição */
.metric-card-row {
    /* Garantir que o card não ultrapasse a largura */
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Permitir quebra de linha se necessário */
    flex-wrap: wrap !important;
    
    /* Espaçamento adequado */
    gap: 8px !important;
    
    /* Prevenir overflow horizontal */
    overflow: hidden !important;
}

/* Texto dentro dos cards - Prevenir sobreposição */
.metric-card-row > span {
    /* Permitir quebra de palavras */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    
    /* Line height adequado para evitar sobreposição */
    line-height: 1.5 !important;
    
    /* Prevenir que o texto ultrapasse */
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Label (primeiro span) - Garantir espaço adequado */
.metric-card-row > span:first-child {
    font-weight: 600 !important;
    flex-shrink: 1 !important;
    /* Limitar largura máxima para não dominar */
    max-width: 50% !important;
}

/* Badges (A e B) - Não devem invadir o texto */
.metric-card-row > span[style*="display"][style*="inline-block"][style*="padding"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Detalhes (valores vs valores) - Permitir quebra se necessário */
.metric-card-row > span[style*="opacity"][style*="marginLeft"] {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-family: monospace !important;
}

/* Separadores (• e x) - Não devem quebrar linha sozinhos */
.metric-card-row > span[style*="opacity"][style*="padding"]:not([style*="marginLeft"]) {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ===== QUICK INSIGHTS - Prevenir overflow ===== */
#quick-insights {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#quick-insights > div {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

/* ===== CONTAINERS GERAIS - Prevenir overflow ===== */
/* Todos os containers principais */
div[style*="maxWidth"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Todos os grids - garantir que não ultrapassem */
div[style*="display"][style*="grid"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Todos os flex containers - prevenir overflow */
div[style*="display"][style*="flex"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== TEXTOS - Prevenir sobreposição ===== */
/* Todos os textos devem ter wrap adequado */
h2, h4, h5, p, span, div {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Headings - line height adequado */
h2 {
    line-height: 1.3 !important;
}

h4 {
    line-height: 1.4 !important;
}

h5 {
    line-height: 1.4 !important;
}

/* Parágrafos - line height confortável */
p {
    line-height: 1.6 !important;
}

/* ===== FILE INFO E META - Prevenir overflow ===== */
div[id^="file-info-"], div[id^="file-meta-"] {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* ===== API BRIDGE INLINE - Prevenir overflow ===== */
div[id^="api-bridge-inline-"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

div[id^="api-bridge-message-"] {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* ===== BUTTONS CONTAINERS - Prevenir overflow ===== */
/* Containers de botões devem permitir wrap */
div[style*="marginBottom"] button {
    max-width: 100% !important;
}

/* Containers que contêm botões inline */
div[style*="marginBottom"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== MOBILE SPECIFIC FIXES ===== */
@media (max-width: 768px) {
    /* Garantir que todos os grids virem coluna única */
    div[style*="gridTemplateColumns"][style*="1fr 1fr"]:not(#quick-compare-grid) {
        grid-template-columns: 1fr !important;
    }
    
    /* Garantir padding adequado */
    div[style*="maxWidth"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Cards do comparativo - garantir espaçamento */
    .metric-card-row {
        margin-bottom: 8px !important;
    }
}

/* ===== DESKTOP TEXT OVERLAP FIXES ===== */
@media (min-width: 769px) {
    /* Cards do comparativo - garantir que não haja sobreposição */
    .metric-card-row {
        /* Usar gap ao invés de space-between para evitar sobreposição */
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    
    /* Label não deve ocupar mais que 40% */
    .metric-card-row > span:first-child {
        max-width: 40% !important;
        flex-shrink: 1 !important;
    }
    
    /* Badges e detalhes - garantir espaço mínimo */
    .metric-card-row > span[style*="display"][style*="inline-block"][style*="padding"],
    .metric-card-row > span[style*="opacity"][style*="marginLeft"] {
        flex-shrink: 0 !important;
        min-width: fit-content !important;
    }
}