/* CSS Mobile Otimizado - Experiência Perfeita */

/* Configuração base mobile - estável sem tremida */
html, body {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

/* Permitir seleção apenas em inputs */
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    touch-action: manipulation;
}

/* Impedir seleção em elementos de interface */
.navbar, .card, .btn, .table, th, td, .dropdown-menu {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Tabelas responsivas - scroll horizontal perfeito */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scroll-behavior: smooth;
}

/* Garantir largura mínima das tabelas */
.table-responsive .table {
    min-width: 800px;
    white-space: nowrap;
}

.table-responsive .table th,
.table-responsive .table td {
    min-width: 120px;
    padding: 8px 12px;
}

/* Canvas do editor de fotos */
#photoCanvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Botões com área de toque adequada */
@media (max-width: 767.98px) {
    .btn, .tool-btn {
        min-height: 44px;
        padding: 12px 16px;
        touch-action: manipulation;
    }
    
    .color-preset {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Melhorar área de scroll em tabelas mobile */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    .table-responsive .table th,
    .table-responsive .table td {
        font-size: 14px;
        min-width: 100px;
    }
}