/* MOBILE OVERRIDES - Gallinoo */
/* Fichier séparé chargé APRÈS style.css pour garantir la priorité */

@media (max-width: 1023px) {
    /* === SIDEBAR : cachée sur mobile/tablette === */
    .sidebar,
    aside.sidebar,
    nav.sidebar,
    .app-layout > aside {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* === LAYOUT : contenu pleine largeur === */
    .app-layout {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .main-content,
    main.main-content,
    .app-layout > main {
        margin-left: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* === BODY : pas de scroll horizontal === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    body {
        padding-bottom: 75px !important;
    }

    /* === TOPBAR : visible === */
    .topbar {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* === GRILLES : empilées en colonne === */
    .grid-2,
    .grid-3,
    .grid-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Inline flex grids aussi */
    [style*="display:grid"],
    [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }
    [style*="display:flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

    /* === STAT CARDS === */
    .stat-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* === TEXTE : pas de débordement === */
    h1 {
        font-size: 1.3rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    h2 {
        font-size: 1.15rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    h3 {
        font-size: 1rem !important;
    }

    /* === BOTTOM NAV === */
    .bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: var(--bg-card, #fff) !important;
        border-top: 1px solid var(--border, #eee) !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
    }

    /* === TABS : scrollable === */
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    .tabs::-webkit-scrollbar { display: none !important; }
    .tab {
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
    }

    /* === TABLES : scroll horizontal === */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }
    table {
        font-size: 0.75rem !important;
        min-width: 500px !important;
    }
    th, td {
        padding: 8px 6px !important;
    }

    /* === MODALS : plein écran mobile === */
    .modal-content {
        padding: 16px !important;
        border-radius: 16px !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
    }

    /* === TOPBAR compacte === */
    .topbar {
        padding: 8px 12px !important;
    }
    .topbar img {
        max-width: 90px !important;
        height: auto !important;
    }

    /* === MOBILE MENU : au-dessus de tout === */
    .mobile-menu {
        z-index: 10000 !important;
    }
    .mobile-menu-panel {
        width: min(280px, 80vw) !important;
    }

    /* === FORMULAIRES : pleine largeur === */
    .input-field, input, select, textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* === FLEX: empêcher débordement === */
    .flex {
        flex-wrap: wrap !important;
    }

    /* === IMAGES === */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Petits téléphones */
@media (max-width: 380px) {
    .main-content,
    main.main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    h1 { font-size: 1.15rem !important; }
    .stat-card { padding: 12px !important; }
    .topbar { padding: 6px 8px !important; }
}

/* 2 colonnes pour grilles sur tablettes */
@media (min-width: 480px) and (max-width: 768px) {
    .grid-4,
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ═══ TABLE WRAPPER — ajouté pour fix mobile ═══ */
@media (max-width: 768px) {
    .table-wrapper,
    .table-container,
    .overflow-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -4px !important;
        padding-bottom: 4px !important;
    }
    .table-wrapper table,
    .table-container table,
    .overflow-table table {
        min-width: 560px !important;
    }

    /* Fix inline style grids/flex that don't use classes */
    [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Formulaires : labels et inputs empilés */
    .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .input-field, input[type="text"], input[type="email"], input[type="number"],
    input[type="date"], input[type="password"], select, textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* évite le zoom auto iOS */
    }

    /* Cards / stat cards horizontales → empilées */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Pedigree / arbre généalogique : forcer scroll */
    .pedigree-viewport {
        height: 320px !important;
    }

    /* Boutons pleine largeur sur mobile */
    .btn-mobile-full {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}