/* ========================================
   CORREÇÃO DE ZOOM DO NAVEGADOR
   Sistema Anti-Desalinhamento Universal
======================================== */

/* Reset de zoom para elementos críticos */
html {
    /* Desabilitar zoom automático CSS que conflita com zoom do navegador */
    zoom: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    
    /* Font-size fixo que se adapta bem ao zoom */
    font-size: 14px !important;
    
    /* Overflow controlado */
    overflow-x: auto;
    overflow-y: auto;
}

body {
    /* Desabilitar transformações que quebram com zoom */
    zoom: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    
    /* Largura mínima para evitar quebras */
    min-width: 320px;
    
    /* Overflow controlado */
    overflow-x: auto;
}

/* Container principal - layout flexível para zoom */
.container {
    /* Largura responsiva que funciona com zoom */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
    
    /* Box-sizing consistente */
    box-sizing: border-box;
}

/* Grid de estatísticas - adaptável ao zoom */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

/* Cards de estatísticas - tamanho fixo que escala bem */
.stat-card {
    /* Padding fixo que funciona com zoom */
    padding: 20px !important;
    min-height: 120px;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
    
    /* Layout flexível */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Bordas e sombras fixas */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* Transições suaves */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stat-card:hover {
    /* Hover sutil que funciona com zoom */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px) !important;
}

/* Valores monetários - alinhamento fixo */
.stat-value {
    /* Font-size que escala bem com zoom */
    font-size: 1.8rem !important;
    font-weight: 700;
    line-height: 1.2;
    
    /* Alinhamento consistente */
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    
    /* Espaçamento controlado */
    margin: 0;
    padding: 0;
    
    /* Fonte tabular para números */
    font-variant-numeric: tabular-nums;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

.stat-value .currency-symbol {
    /* Símbolo R$ com espaçamento fixo */
    margin-right: 4px !important;
    font-size: 0.9em;
    flex-shrink: 0;
}

.stat-value .currency-value {
    /* Valor numérico flexível */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabelas - layout fixo que funciona com zoom */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

table {
    width: 100% !important;
    min-width: 800px; /* Largura mínima para evitar quebras */
    border-collapse: collapse;
    font-size: 13px !important;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

th, td {
    /* Padding fixo que escala bem */
    padding: 12px 8px !important;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
    
    /* Quebra de texto controlada */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Colunas específicas com larguras fixas */
th:nth-child(1), td:nth-child(1) { /* ID */
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}

th:nth-child(2), td:nth-child(2) { /* Banco */
    width: 140px;
    min-width: 140px;
    max-width: 180px;
}

th:nth-child(3), td:nth-child(3) { /* Código */
    width: 280px;
    min-width: 200px;
    max-width: 320px;
    font-family: 'Courier New', monospace;
    font-size: 12px !important;
    word-break: break-all;
    white-space: normal;
    line-height: 1.3;
}

th:nth-child(4), td:nth-child(4), /* Vencimento */
th:nth-child(5), td:nth-child(5) { /* Data Consulta */
    width: 100px;
    min-width: 90px;
    max-width: 110px;
    text-align: center;
    white-space: nowrap;
}

th:nth-child(6), td:nth-child(6) { /* Valor */
    width: 120px;
    min-width: 100px;
    max-width: 140px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

th:nth-child(7), td:nth-child(7) { /* Status */
    width: 100px;
    min-width: 90px;
    max-width: 110px;
    text-align: center;
}

th:nth-child(8), td:nth-child(8) { /* Ações */
    width: 120px;
    min-width: 100px;
    max-width: 140px;
    text-align: center;
}

/* Botões - tamanho fixo que funciona com zoom */
.btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
    
    /* Transição suave */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
    /* Hover sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Header - layout fixo */
.header {
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

.header h1 {
    font-size: 2.2rem !important;
    margin-bottom: 8px;
    font-weight: 600;
}

.header p {
    font-size: 1rem !important;
    color: #6c757d;
    margin: 0;
}

/* Upload section - layout flexível */
.upload-section-compact {
    margin-bottom: 30px;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

.upload-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
    
    /* Hover suave */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.upload-compact:hover {
    border-color: #007bff;
    background: #e3f2fd;
}

/* Filtros - layout em grid */
.filters-section {
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    
    /* Desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

/* Responsividade para telas menores */
@media (max-width: 1200px) {
    .container {
        padding: 16px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px !important;
        min-height: 100px;
    }
    
    .stat-value {
        font-size: 1.6rem !important;
    }
    
    table {
        font-size: 12px !important;
    }
    
    th, td {
        padding: 8px 6px !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 12px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
    }
    
    .stat-card {
        padding: 12px !important;
        min-height: 90px;
    }
    
    .stat-value {
        font-size: 1.4rem !important;
    }
    
    .header h1 {
        font-size: 1.8rem !important;
    }
    
    .header p {
        font-size: 0.9rem !important;
    }
    
    table {
        min-width: 600px;
        font-size: 11px !important;
    }
    
    th, td {
        padding: 6px 4px !important;
    }
    
    .filters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .stat-card {
        padding: 10px !important;
        min-height: 80px;
    }
    
    .stat-value {
        font-size: 1.2rem !important;
    }
    
    .header h1 {
        font-size: 1.5rem !important;
    }
    
    table {
        min-width: 500px;
        font-size: 10px !important;
    }
    
    th, td {
        padding: 4px 2px !important;
    }
}

/* Desabilitar todos os sistemas de escala automática */
[data-scale-factor],
[data-resolution],
.auto-scale-detected,
.desktop-standard-mode,
.high-zoom,
.low-zoom,
.ultra-wide,
.large-desktop,
.standard-desktop,
.medium-laptop,
.small-laptop {
    transform: none !important;
    zoom: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Forçar reset de variáveis CSS que podem interferir */
:root {
    --scale-factor: 1 !important;
    --responsive-scale: 1 !important;
    --base-font-size: 14px !important;
}

/* Tema escuro - manter cores mas corrigir layout */
.dark-theme .container,
.dark-theme .stat-card,
.dark-theme .filters-section,
.dark-theme .table-container,
.dark-theme .upload-compact {
    /* Manter funcionalidade do tema escuro */
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
    
    /* Mas desabilitar transformações */
    transform: none !important;
    zoom: 1 !important;
}

.dark-theme table {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

.dark-theme th {
    background: #4a5568 !important;
    color: #e2e8f0 !important;
    border-bottom-color: #718096 !important;
}

.dark-theme td {
    border-bottom-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

/* Importante: Desabilitar TODOS os sistemas de zoom/escala JavaScript */
html[style*="zoom"],
body[style*="zoom"],
*[style*="transform: scale"],
*[style*="zoom:"] {
    zoom: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Garantir que elementos críticos nunca sejam transformados */
.stat-value,
.currency-symbol,
.currency-value,
table,
th,
td,
.btn,
.container,
.stats-grid,
.stat-card {
    transform: none !important;
    zoom: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}