/* ===== CSS RESPONSIVO PARA MOBILE ===== */
/* Correções gerais para responsividade em dispositivos móveis */

/* RESET AGGRESSIVO PARA MOBILE - FORÇAR ADAPTAÇÃO */
* {
    box-sizing: border-box !important;
}

html {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Garantir que nenhum elemento ultrapasse a largura da tela */
*, *::before, *::after {
    max-width: 100% !important;
}

/* Prevenir zoom automático em inputs no iOS */
input, textarea, select {
    font-size: 16px !important;
}

/* Forçar layout vertical em containers principais */
main, .wrapper, .content, .container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ===== CORREÇÕES ESPECÍFICAS PARA PÁGINA DE LOGIN ===== */
@media screen and (max-width: 768px) {
    /* Garantir que a página de login fique centralizada */
    .h-p100 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        padding: 15px !important;
    }
    
    .row {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Formulário responsivo */
    .login-container {
        background: transparent !important;
        padding: 20px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Input centralizado */
    .form-control {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Botão de login responsivo */
    .btn-block {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 50px !important;
        font-size: 16px !important;
    }
    
    /* Footer responsivo */
    footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        font-size: 12px !important;
        padding: 10px 5px !important;
        text-align: center !important;
    }
}

/* ===== CORREÇÕES GERAIS PARA MOBILE ===== */
@media screen and (max-width: 768px) {
    /* Prevenir overflow horizontal */
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Containers responsivos */
    .col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .col-md-8, .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .container, .container-full {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .p-30 {
        padding: 15px !important;
    }
    
    /* Canvas e efeitos */
    canvas {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    #particles-js, #matrix-canvas {
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Grid e rows */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
        max-width: 100% !important;
    }
    
    .row > * {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Cards responsivos */
    .card {
        margin-bottom: 15px !important;
        max-width: 100% !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    /* Form controls */
    .form-control {
        font-size: 16px !important; /* Evita zoom no iOS */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Textarea responsivo */
    .form-checker, textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }
    
    /* Botões responsivos */
    .btn {
        width: 100% !important;
        min-height: 44px !important; /* Tamanho mínimo touch-friendly */
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    .btn-play, .btn-stop {
        width: calc(50% - 5px) !important;
        display: inline-block !important;
    }
    
    /* Wrapper e containers principais */
    .wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .grid-container {
        padding: 0 10px !important;
        max-width: 100% !important;
    }
    
    .content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Badges e labels */
    .badge {
        font-size: 12px !important;
        padding: 5px 8px !important;
        word-break: break-word !important;
    }
    
    /* Elementos fixos - ajustar posição no mobile */
    .back-to-dashboard-button {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        z-index: 10000 !important;
    }
    
    .checkers-menu-container {
        left: 10px !important;
        top: 10px !important;
    }
    
    .timer-compact {
        top: 10px !important;
        right: 10px !important;
        padding: 8px 12px !important;
    }
    
    /* Gráficos e charts */
    .chart-container {
        height: 250px !important;
        max-width: 100% !important;
    }
    
    .chart-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Card generator section - ajustar para mobile */
    .card-generator-section .row {
        display: block !important;
        flex-wrap: wrap !important;
    }
    
    .card-generator-section .col-2,
    .card-generator-section .col-3,
    .card-generator-section .col-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    /* Gerador de cartões - layout vertical no mobile */
    .card-generator-section {
        padding: 15px 10px !important;
        margin: 10px 0 !important;
    }
    
    .generator-input {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    .generator-btn {
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    /* Seção visualização */
    .secao-visualizacao {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }
    
    .lista-dinamica {
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    /* Estatísticas e badges horizontais */
    .stats-h5 {
        font-size: 14px !important;
        display: block !important;
        margin-bottom: 10px !important;
    }
    
    .stats-h5 .badge {
        float: none !important;
        display: inline-block !important;
    }
    
    /* Menu dropdown */
    .checkers-menu {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
    
    .checkers-dropdown {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 280px !important;
    }
    
    /* Footer */
    footer {
        font-size: 12px !important;
        padding: 10px !important;
        line-height: 1.3 !important;
    }
}

/* ===== TELAS MUITO PEQUENAS (até 480px) ===== */
@media screen and (max-width: 480px) {
    .grid-container {
        padding: 0 5px !important;
    }
    
    .card-body {
        padding: 10px !important;
    }
    
    .form-control {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    .btn {
        font-size: 14px !important;
        padding: 10px !important;
        min-height: 40px !important;
    }
    
    .btn-play, .btn-stop {
        font-size: 12px !important;
        padding: 8px 5px !important;
    }
    
    /* Gerador de cartões - layout ainda mais compacto */
    .card-generator-section {
        padding: 10px 5px !important;
    }
    
    .generator-input {
        font-size: 14px !important;
        padding: 8px !important;
    }
    
    .generator-btn {
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    /* Gráfico menor em telas pequenas */
    .chart-container {
        height: 200px !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.2em !important;
    }
    
    /* Elementos fixos menores */
    .back-to-dashboard-button,
    .checkers-menu,
    .timer-compact {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
    
    /* Badges menores */
    .badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

/* ===== CORREÇÃO DE OVERFLOW HORIZONTAL ===== */
@media screen and (max-width: 768px) {
    * {
        max-width: 100% !important;
    }
    
    img, canvas, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    pre {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
    }
}