/* ===========================================
   TIKA - Minimal Responsive Fixes
   Corrections minimales sans casser l'existant
   =========================================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive tables - wrapper only */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modal improvements for mobile */
@media (max-width: 768px) {
    .modal-content,
    .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }
}

/* Form inputs - prevent zoom on iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Ensure tap targets are large enough */
@media (max-width: 768px) {
    button, a, input, select, textarea {
        min-height: 44px;
    }
}

/* Container padding on mobile */
@media (max-width: 640px) {
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Only apply to elements that explicitly need it */
.responsive-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
}

/* Helper classes for mobile */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full-width {
        width: 100%;
    }
    
    .mobile-stack {
        flex-direction: column;
    }
    
    .mobile-center {
        text-align: center;
    }
}