/* ============================================
   BASE RESPONSIVA - LFX PRIME LOGISTIC
   Aplicar em todas as páginas
   ============================================ */

/* Variáveis CSS para breakpoints */
:root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* ===== UTILITÁRIOS GERAIS ===== */

/* Esconder elementos não essenciais em mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* ===== AJUSTES GERAIS DE LAYOUT ===== */

@media (max-width: 768px) {
    /* Ajustes de padding */
    .page-content,
    .content-section {
        padding: 15px !important;
    }
    
    /* Ajustes de fontes */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .page-content,
    .content-section {
        padding: 10px !important;
    }
    
    h1 {
        font-size: 1.3rem !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
}

/* ===== BOTÕES RESPONSIVOS ===== */

@media (max-width: 768px) {
    /* Botões full-width em mobile (exceto action-btn e toggle-password) */
    .btn,
    button:not(.action-btn):not(.toggle-password):not(.navio-action-btn):not(.delete-item-btn) {
        width: 100% !important;
        margin-bottom: 10px;
    }
}

/* ===== MODAIS RESPONSIVOS ===== */

@media (max-width: 768px) {
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 2.5vw !important;
        max-height: 95vh !important;
        overflow-y: auto;
    }
    
    .large-modal,
    .extra-large-modal {
        width: 98vw !important;
        max-width: 98vw !important;
        margin: 1vw !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .view-grid {
        grid-template-columns: 1fr !important;
    }
    
    .view-section {
        padding: 15px !important;
    }
}

/* ===== TABELAS RESPONSIVAS ===== */

/* Wrapper responsivo para tabelas */
.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.responsive-table-wrapper::after {
    content: '→';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #663F8C;
    opacity: 0.3;
    pointer-events: none;
    display: none;
}

@media (max-width: 768px) {
    .responsive-table-wrapper {
        margin: 0 -15px;
        padding: 0 15px;
    }
    
    .responsive-table-wrapper::after {
        display: block;
    }
    
    /* Ajustar tamanho de fonte em tabelas */
    table {
        font-size: 0.85rem !important;
    }
    
    table th,
    table td {
        padding: 8px 6px !important;
        white-space: nowrap;
    }
    
    /* Reduzir larguras mínimas de tabelas grandes */
    .reservations-table,
    .navios-table,
    .details-table {
        min-width: 600px !important;
    }
}

/* ===== FORMULÁRIOS RESPONSIVOS ===== */

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .filters-section {
        flex-direction: column !important;
    }
    
    .filter-group {
        min-width: auto !important;
        width: 100% !important;
    }
    
    /* Inputs full-width */
    .form-group input,
    .form-group select,
    .form-group textarea,
    input:not(.action-btn):not(.toggle-password),
    select:not(.action-btn),
    textarea:not(.action-btn) {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Botões de ação em coluna */
    .form-actions,
    .filters-actions {
        flex-direction: column !important;
    }
    
    .form-actions .btn,
    .filters-actions .btn,
    .form-actions button,
    .filters-actions button {
        width: 100% !important;
        margin: 5px 0 !important;
    }
}

/* ===== BADGES DINÂMICOS ===== */

.table-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

@media (max-width: 768px) {
    .table-icon-badge {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
}

/* Ajuste para células combinadas */
@media (max-width: 768px) {
    .combined-icons-cell {
        gap: 4px !important;
    }
}

/* Classes de cores para badges */
.badge-tipo-exportacao {
    background: #28a745 !important;
    color: white !important;
}

.badge-tipo-importacao {
    background: #007bff !important;
    color: white !important;
}

.badge-modal-aeroviario {
    background: #007bff !important;
    color: white !important;
}

.badge-modal-rodoviario {
    background: #ff6b35 !important;
    color: white !important;
}

.badge-modal-aquaviario {
    background: #0056b3 !important;
    color: white !important;
}