/* ============================================
   SPEAKFREE - STYLES MOBILE RESPONSIVE
   Version 2.0 - Anti-débordement complet
   ============================================ */

/* ============================================
   RÈGLES GLOBALES ANTI-DÉBORDEMENT
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100%;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
}

/* Empêcher le débordement de tous les éléments */
img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
}

/* Gestion du texte long */
p, span, div, li, td, th, label, a, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Code et texte préformaté */
pre, code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* ============================================
   MEDIA QUERIES MOBILES
   ============================================ */
@media screen and (max-width: 768px) {
    
    /* Container principal */
    body > * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container, .content, .main, main, section, article {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
    }

    /* ============================================
       NAVIGATION MOBILE
       ============================================ */
    nav {
        padding: 12px 15px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    nav .logo {
        font-size: 1.1em !important;
        flex-shrink: 0 !important;
    }

    nav .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    nav .nav-links a {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
        background: rgba(102, 126, 234, 0.1) !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
    }

    /* ============================================
       BOUTONS TACTILES
       ============================================ */
    button, .btn, [type="submit"], [type="button"], a.btn {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 0.95em !important;
        cursor: pointer;
        touch-action: manipulation;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* ============================================
       INPUTS TACTILES
       ============================================ */
    input, textarea, select {
        font-size: 16px !important; /* Empêche le zoom iOS */
        padding: 14px 12px !important;
        border-radius: 10px !important;
        border: 2px solid #e0e0e0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    input:focus, textarea:focus, select:focus {
        outline: none !important;
        border-color: #667eea !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    }

    /* ============================================
       CARTES ET CONTENEURS
       ============================================ */
    .card, .school-card, .stat-card, .report-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cards, .card-grid, .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* ============================================
       GRILLES RESPONSIVES
       ============================================ */
    .stats, .stat-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .feature-grid, .features {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Grille de détails */
    .detail-grid, .report-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .detail-grid > div, .report-meta > div {
        width: 100% !important;
    }

    /* ============================================
       TEXTES RESPONSIFS
       ============================================ */
    h1 {
        font-size: 1.6em !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.3em !important;
    }

    h3 {
        font-size: 1.15em !important;
    }

    p, li {
        font-size: 0.95em !important;
        line-height: 1.6 !important;
    }

    /* ============================================
       HEADER MOBILE
       ============================================ */
    header {
        padding: 25px 15px 20px !important;
        text-align: center !important;
    }

    header h1 {
        font-size: 1.8em !important;
    }

    header p {
        font-size: 0.95em !important;
    }

    /* ============================================
       MODAL MOBILE
       ============================================ */
    .modal {
        padding: 10px !important;
    }
    
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 95vh !important;
        margin: 0 !important;
        padding: 15px !important;
        overflow-y: auto !important;
        border-radius: 15px 15px 0 0 !important;
    }

    .modal-header, .modal-footer {
        padding: 10px 0 !important;
    }

    .modal-body {
        padding: 10px 0 !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    /* ============================================
       CHAT MOBILE
       ============================================ */
    .chat-container {
        height: calc(100vh - 150px) !important;
        max-height: none !important;
    }
    
    .messages-container {
        height: calc(100% - 80px) !important;
        padding: 10px !important;
        overflow-y: auto !important;
    }

    .message {
        max-width: 90% !important;
    }
    
    .message-content {
        max-width: 100% !important;
        font-size: 0.9em !important;
        padding: 10px 12px !important;
        word-wrap: break-word !important;
    }

    .chat-input-container {
        padding: 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .chat-input, #chatInput, #messageInput {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px !important;
    }

    .send-btn, #sendBtn {
        padding: 12px 16px !important;
        flex-shrink: 0 !important;
    }

    /* Prévisualisation fichiers */
    .file-preview, #filePreview {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .file-item {
        max-width: 80px !important;
    }

    /* ============================================
       FORMULAIRES MOBILE
       ============================================ */
    .form-container, form {
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }

    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    label {
        font-size: 0.9em !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    /* ============================================
       TABLEAUX RESPONSIFS
       ============================================ */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ============================================
       ADMIN DASHBOARD MOBILE
       ============================================ */
    .admin-container, .dashboard {
        flex-direction: column !important;
    }
    
    .admin-sidebar, .sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100% !important;
        z-index: 1000 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }

    .admin-sidebar.open, .sidebar.open {
        left: 0 !important;
    }
    
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 999 !important;
    }

    .admin-main, .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }
    
    .admin-header {
        padding: 15px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Stats admin */
    .admin-stats, .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-card h3, .stat-value {
        font-size: 1.5em !important;
    }

    /* ============================================
       SIGNALEMENTS MOBILE
       ============================================ */
    .report-card {
        padding: 15px !important;
    }
    
    .report-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    
    .report-code {
        font-size: 0.85em !important;
    }
    
    .report-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .report-meta > div {
        width: 100% !important;
    }
    
    .report-description {
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    .report-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .status-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        width: 100% !important;
    }
    
    .status-actions button {
        flex: 1 !important;
        min-width: 90px !important;
        padding: 8px 10px !important;
        font-size: 0.8em !important;
    }
    
    .action-btns {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .action-btns button, .action-btns a {
        flex: 1 !important;
    }

    /* ============================================
       DISCUSSIONS MOBILE
       ============================================ */
    .discussion-card {
        padding: 12px !important;
    }
    
    .discussion-header {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* ============================================
       SÉLECTEUR TYPE INCIDENT (Chat IA)
       ============================================ */
    .incident-type-selector {
        padding: 15px !important;
    }
    
    .incident-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .incident-type-btn {
        padding: 12px 8px !important;
        font-size: 0.85em !important;
    }
    
    .incident-type-btn .icon {
        font-size: 1.5em !important;
    }

    /* ============================================
       GALERIE MÉDIAS MOBILE
       ============================================ */
    .media-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .media-item {
        width: 100% !important;
    }
    
    .media-item img, .media-item video {
        max-height: 150px !important;
    }
    
    .media-info {
        padding: 8px !important;
    }
    
    .media-name {
        font-size: 0.75em !important;
    }
    
    .media-actions {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .media-btn {
        width: 100% !important;
        font-size: 0.8em !important;
    }

    /* Lightbox mobile */
    .lightbox, #mediaLightbox {
        padding: 10px !important;
    }
    
    .lightbox-content img, .lightbox-content video {
        max-width: 100% !important;
        max-height: 70vh !important;
    }
    
    .lightbox-nav {
        font-size: 1.5em !important;
        padding: 10px !important;
    }

    /* ============================================
       SUPER ADMIN MOBILE
       ============================================ */
    .school-card .buttons, .card-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .school-card .buttons button, .card-actions button {
        width: 100% !important;
    }

    .tabs, .tab-list {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 5px !important;
        padding-bottom: 5px !important;
        flex-wrap: nowrap !important;
    }

    .tab-btn, .tab {
        flex-shrink: 0 !important;
        padding: 10px 15px !important;
        font-size: 0.85em !important;
        white-space: nowrap !important;
    }

    /* ============================================
       PAGES SPÉCIFIQUES
       ============================================ */
    
    /* Page d'accueil */
    .hero, .hero-section {
        padding: 30px 15px !important;
        text-align: center !important;
    }
    
    .hero h1 {
        font-size: 1.8em !important;
    }
    
    .hero-buttons, .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .hero-buttons a, .cta-buttons a {
        width: 100% !important;
        text-align: center !important;
    }

    /* Page écoles */
    .school-list, .schools-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Page inscription école */
    .register-form {
        padding: 20px 15px !important;
    }

    /* Page login */
    .login-container, .auth-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
    }

    /* ============================================
       FOOTER MOBILE
       ============================================ */
    footer {
        padding: 20px 15px !important;
        text-align: center !important;
    }

    footer .footer-content {
        flex-direction: column !important;
        gap: 15px !important;
    }

    footer p {
        font-size: 0.85em !important;
    }
    
    footer a {
        display: block !important;
        padding: 5px 0 !important;
    }
}

/* ============================================
   ÉCRANS TRÈS PETITS (< 360px)
   ============================================ */
@media screen and (max-width: 359px) {
    html {
        font-size: 14px;
    }
    
    nav .nav-links a {
        padding: 6px 8px !important;
        font-size: 0.75em !important;
    }
    
    .stats, .stat-cards, .admin-stats {
        grid-template-columns: 1fr !important;
    }
    
    .incident-types-grid {
        grid-template-columns: 1fr !important;
    }
    
    .media-gallery {
        grid-template-columns: 1fr !important;
    }
    
    h1 {
        font-size: 1.4em !important;
    }
    
    h2 {
        font-size: 1.2em !important;
    }
    
    button, .btn {
        padding: 10px 12px !important;
        font-size: 0.85em !important;
    }
}

/* ============================================
   TABLETTES (768px - 1024px)
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 20px !important;
    }
    
    .admin-sidebar {
        width: 220px !important;
    }
    
    .admin-main {
        margin-left: 220px !important;
    }
    
    .cards, .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .incident-types-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================
   ORIENTATION PAYSAGE MOBILE
   ============================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .messages-container {
        height: 150px !important;
    }
    
    .chat-container {
        height: calc(100vh - 100px) !important;
    }
    
    header {
        padding: 10px 15px !important;
    }
    
    header h1 {
        font-size: 1.3em !important;
    }
    
    .modal-content {
        max-height: 95vh !important;
    }
    
    .modal-body {
        max-height: 60vh !important;
    }
}

/* ============================================
   ANIMATIONS RÉDUITES (accessibilité)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   IMPRESSION
   ============================================ */
@media print {
    nav, footer, .sidebar, .admin-sidebar, .action-btns, .status-actions, button {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    .container, .main-content, .admin-main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}