/* ===================================================
   Optimisations mobiles pour RssManager
   =================================================== */

/* Désactiver le zoom sur double-tap globalement */
* {
    touch-action: manipulation;
}

/* Améliorer le défilement tactile sur iOS */
.xml-structure,
.field-list,
.preview-container,
.source-viewer,
.pipeline-content,
.source-content {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* ===================================================
   Media Queries pour mobile
   =================================================== */
@media (max-width: 768px) {
    
    /* --- Boutons optimisés pour le tactile --- */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px !important;
        font-size: 16px !important;
        margin-bottom: 8px;
    }
    
    /* Stack les boutons verticalement sur mobile */
    .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 8px;
    }
    
    .d-flex.justify-content-between > div {
        width: 100%;
    }
    
    .d-flex.justify-content-between .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* --- Headers collapsibles optimisés --- */
    .collapsible-header {
        min-height: 48px;
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .collapsible-header h3 {
        font-size: 1.1rem;
    }
    
    .collapsible-header i {
        font-size: 1.2rem;
        margin-right: 12px;
    }
    
    /* --- Sections principales --- */
    .input-section,
    .mapping-section,
    .source-content-section,
    .status-section {
        padding: 12px !important;
        margin-bottom: 16px !important;
        border-radius: 8px;
    }
    
    /* --- Formulaires et inputs --- */
    input[type="text"],
    input[type="url"],
    input[type="email"],
    select,
    textarea,
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px !important; /* Évite le zoom automatique iOS */
        padding: 10px 12px !important;
    }
    
    /* Checkboxes plus grandes */
    input[type="checkbox"] {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }
    
    /* Labels alignés avec checkboxes */
    .field-item {
        padding: 12px 16px !important;
        margin-bottom: 8px !important;
        display: flex;
        align-items: center;
        min-height: 48px;
    }
    
    /* --- Structure XML et visualiseurs --- */
    .xml-structure {
        max-height: 300px !important;
        font-size: 14px;
        padding: 12px;
    }
    
    .source-viewer {
        max-height: 300px !important;
        font-size: 12px !important;
        line-height: 1.4;
        padding: 12px !important;
    }
    
    /* --- Tables responsives --- */
    .table-responsive {
        font-size: 14px;
    }
    
    .table td,
    .table th {
        padding: 8px !important;
    }
    
    /* Select dans les tables */
    .table select {
        width: 100%;
        min-width: 120px;
    }
    
    /* --- Preview section --- */
    .preview-section {
        max-height: 400px;
        overflow-y: auto;
    }
    
    /* --- Bouton copier optimisé --- */
    #copy-text {
        padding: 10px 16px !important;
        min-width: 80px;
    }
    
    /* --- Messages et alertes --- */
    .alert {
        padding: 12px;
        font-size: 14px;
    }
    
    .status-item {
        padding: 10px;
        margin-bottom: 8px;
        font-size: 14px;
    }
    
    /* --- Titres --- */
    h1 {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }
    
    h2 {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }
    
    h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    h4 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    /* --- Optimiser l'espace vertical --- */
    .mt-4 {
        margin-top: 1rem !important;
    }
    
    .mt-3 {
        margin-top: 0.75rem !important;
    }
    
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    /* --- Désactiver les effets hover sur mobile --- */
    .field-item:hover,
    .btn:hover,
    .collapsible-header:hover {
        background-color: inherit !important;
        opacity: 1 !important;
    }
    
    /* --- Remplacer hover par active pour le feedback tactile --- */
    .field-item:active {
        background-color: #e9ecef !important;
        transition: background-color 0.1s;
    }
    
    .btn:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    .collapsible-header:active {
        background-color: rgba(0, 0, 0, 0.05);
        transition: background-color 0.1s;
    }
    
    /* --- Cards et conteneurs --- */
    .card {
        margin-bottom: 12px;
    }
    
    .card-header {
        padding: 10px;
        font-size: 14px;
    }
    
    .card-body {
        padding: 12px;
    }
    
    /* --- Spinner de chargement --- */
    .spinner-border-sm {
        width: 1.2rem !important;
        height: 1.2rem !important;
    }
}

/* ===================================================
   Optimisations pour très petits écrans (<375px)
   =================================================== */
@media (max-width: 375px) {
    /* Réduire encore les paddings */
    .input-section,
    .mapping-section,
    .source-content-section,
    .status-section {
        padding: 8px !important;
    }
    
    /* Boutons plus compacts */
    .btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    /* Titres plus petits */
    h3 {
        font-size: 1rem;
    }
    
    /* Source viewer encore plus compact */
    .source-viewer {
        font-size: 11px !important;
        max-height: 250px !important;
    }
}

/* ===================================================
   Mode paysage mobile
   =================================================== */
@media (max-width: 812px) and (orientation: landscape) {
    /* Réduire les hauteurs maximales en paysage */
    .xml-structure,
    .source-viewer {
        max-height: 200px !important;
    }
    
    /* Headers plus compacts */
    .collapsible-header {
        min-height: 40px;
        padding: 8px 12px;
    }
    
    /* Sections plus compactes */
    .input-section,
    .mapping-section,
    .source-content-section,
    .status-section {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* ===================================================
   Améliorations pour l'accessibilité tactile
   =================================================== */

/* Indicateur de focus visible pour la navigation au clavier */
.btn:focus,
.form-control:focus,
.form-select:focus,
.collapsible-header:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Zone de tap plus grande pour les icônes */
.bi {
    padding: 4px;
    margin: -4px;
}

/* Améliorer la lisibilité des textes */
@media (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Contraste amélioré pour les petits textes */
    .text-muted {
        color: #495057 !important;
    }
    
    .small {
        font-size: 14px !important;
    }
}

/* ===================================================
   Animations et transitions optimisées
   =================================================== */
@media (max-width: 768px) {
    /* Transitions plus rapides sur mobile */
    .collapsible-header i,
    .btn,
    .field-item {
        transition-duration: 0.15s !important;
    }
    
    /* Désactiver les animations complexes */
    .collapse {
        transition: none !important;
    }
}

/* ===================================================
   Support des gestes iOS
   =================================================== */
@supports (-webkit-touch-callout: none) {
    /* iOS specific */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Éviter le menu contextuel sur long press */
    .btn,
    .collapsible-header {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
}