/* ==================================================
   ADMIN MOBILE RESPONSIVE - Mission 2.5
   Compatible iPhone 12/14, Galaxy S23, tous mobiles
   ================================================== */

/* ==================================================
   BASE MOBILE
   ================================================== */

/* Assurer une base de 16px pour mobile */
@media (max-width: 768px) {
    html {
        font-size: 16px;
    }

    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Éviter le zoom sur les inputs iOS */
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* ==================================================
   HEADER ADMIN - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .admin-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.5rem 1rem !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        background: var(--col-card, #fff) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    /* Cacher photo profil sur mobile pour gagner de l'espace */
    .admin-profile {
        display: none !important;
    }

    .admin-logo-center {
        margin: 0 !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding-left: 50px !important;
    }

    .admin-logo-center img {
        width: 40px !important;
        height: 40px !important;
    }

    .admin-logo-text {
        font-size: 1rem !important;
    }

    .admin-logo-text small {
        font-size: 0.7rem !important;
    }

    .admin-profile img {
        width: 35px !important;
        height: 35px !important;
    }

    /* Menu navigation mobile - SCROLL HORIZONTAL */
    .admin-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        background: transparent !important;
        box-shadow: none !important;

        /* Scrollbar stylée */
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;
    }

    .admin-nav::-webkit-scrollbar {
        height: 3px;
    }

    .admin-nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
    }

    /* Boutons navigation compacts */
    .admin-nav .nav-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 0.5rem 0.75rem !important;
        min-width: auto !important;
        font-size: 0.75rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .admin-nav .nav-btn i {
        font-size: 1rem !important;
        margin-right: 0.25rem !important;
    }

    .admin-nav .nav-btn span {
        display: inline !important;
    }

    /* Bouton logout toujours visible à droite */
    .btn-logout {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 44px !important;
        font-size: 0.75rem !important;
    }

    /* Cacher texte sur très petit écran, garder icônes */
    @media (max-width: 375px) {
        .admin-nav .nav-btn span,
        .btn-logout span {
            display: none !important;
        }

        .admin-nav .nav-btn,
        .btn-logout {
            padding: 0.5rem !important;
            min-width: 44px !important;
            justify-content: center !important;
        }

        .admin-nav .nav-btn i,
        .btn-logout i {
            margin: 0 !important;
        }
    }

    /* SUPPRIMER complètement sidebar toggle */
    .sidebar-toggle,
    .burger-line,
    .sidebar-overlay {
        display: none !important;
    }
}

/* ==================================================
   MAIN CONTAINER - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .main-container {
        padding: 1rem !important;
        margin-top: 80px !important;
        max-width: 100% !important;
    }

    .page-title h1 {
        font-size: 1.5rem !important;
    }

    .page-title p {
        font-size: 0.9rem !important;
    }
}

/* ==================================================
   CARDS & SECTIONS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .section-card, .card {
        margin: 1rem 0 !important;
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .section-header h2 {
        font-size: 1.2rem !important;
    }

    /* Stats cards */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    .stat-card {
        padding: 1rem !important;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }

    .stat-info h3 {
        font-size: 1.5rem !important;
    }

    .stat-info p {
        font-size: 0.85rem !important;
    }
}

/* ==================================================
   BUTTONS - TOUCH FRIENDLY
   ================================================== */

@media (max-width: 768px) {
    .btn, button:not(.sidebar-toggle):not(.burger):not(.nav-close-btn) {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.95rem !important;
        touch-action: manipulation;
    }

    .btn-sm {
        min-height: 38px !important;
        min-width: 38px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Boutons d'action dans les listes */
    .file-actions, .slot-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .file-actions .btn, .slot-actions .btn {
        width: 100% !important;
    }
}

/* ==================================================
   FORMS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .form-group {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    input, textarea, select {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        min-height: 44px !important;
    }

    textarea {
        min-height: 100px !important;
    }

    label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
}

/* ==================================================
   TABLES - MOBILE SCROLL
   ================================================== */

@media (max-width: 768px) {
    .files-list, .slot-list, .activity-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .file-item, .slot-item, .activity-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
        padding: 1rem !important;
    }

    .file-info, .slot-info {
        width: 100% !important;
    }

    .file-details h4 {
        font-size: 0.95rem !important;
    }

    .file-details p {
        font-size: 0.85rem !important;
    }

    /* Tables standards */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table thead {
        display: none; /* Cacher les headers sur mobile */
    }

    table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1rem;
    }

    table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border: none;
    }

    table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
    }
}

/* ==================================================
   TABS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .tab-btn {
        min-width: 120px;
        white-space: nowrap;
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
    }

    .tab-btn i {
        font-size: 1rem !important;
    }
}

/* ==================================================
   MODALS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto;
        margin: 1rem;
    }

    .modal-header h2 {
        font-size: 1.2rem !important;
    }

    .modal-actions {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .modal-actions button {
        width: 100% !important;
    }
}

/* ==================================================
   CHARTS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .chart-container {
        padding: 1rem !important;
    }

    .chart-container h4 {
        font-size: 1rem !important;
    }

    canvas {
        max-height: 250px !important;
    }
}

/* ==================================================
   FULLCALENDAR - MOBILE
   ================================================== */

@media (max-width: 768px) {
    #calendar {
        padding: 0.5rem !important;
    }

    .fc-toolbar {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .fc-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        min-height: 38px !important;
    }

    .fc-daygrid-day {
        min-height: 50px !important;
    }

    .fc-event {
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }

    /* Mobile: privilégier la vue jour/semaine */
    .fc .fc-timeGridWeek-view,
    .fc .fc-timeGridDay-view {
        font-size: 0.85rem !important;
    }
}

/* ==================================================
   CHAT COMMS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    #chat-container {
        max-height: 300px !important;
        padding: 1rem !important;
    }

    .chat-message {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .chat-message.user {
        margin-left: 0.5rem !important;
    }

    .chat-message.bot {
        margin-right: 0.5rem !important;
    }
}

/* ==================================================
   GRIDS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .grid-dispo, .actions-grid, .content-grid, .quick-links {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .action-card, .card-dispo {
        padding: 1.5rem !important;
        min-height: auto !important;
    }

    /* Grid financier */
    .year-selector {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .year-selector select {
        width: 100% !important;
        margin-top: 0.5rem;
    }
}

/* ==================================================
   UTILITIES - MOBILE
   ================================================== */

@media (max-width: 768px) {
    /* Cacher sur mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Afficher seulement sur mobile */
    .show-mobile {
        display: block !important;
    }

    /* Texte centré mobile */
    .text-center-mobile {
        text-align: center !important;
    }

    /* Stack vertical mobile */
    .stack-mobile {
        flex-direction: column !important;
    }

    /* Padding réduit mobile */
    .p-mobile-sm {
        padding: 0.5rem !important;
    }

    /* Margin réduite mobile */
    .m-mobile-sm {
        margin: 0.5rem !important;
    }
}

/* ==================================================
   TOAST NOTIFICATIONS - MOBILE
   ================================================== */

@media (max-width: 768px) {
    .toast {
        bottom: 20px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100% - 20px) !important;
        font-size: 0.9rem !important;
    }
}

/* ==================================================
   ANIMATIONS - MOBILE (RÉDUITES)
   ================================================== */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================================================
   LANDSCAPE MOBILE
   ================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .main-container {
        padding: 0.75rem !important;
    }

    #chat-container {
        max-height: 200px !important;
    }

    .modal-content {
        max-height: 80vh !important;
    }
}

/* ==================================================
   SMALL SCREENS (iPhone SE, petits Android)
   ================================================== */

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

    .btn, button {
        font-size: 0.85rem !important;
        padding: 0.6rem 1rem !important;
    }

    .section-header h2 {
        font-size: 1rem !important;
    }

    .page-title h1 {
        font-size: 1.3rem !important;
    }
}

/* ==================================================
   DARK MODE MOBILE
   ================================================== */

@media (max-width: 768px) {
    body.theme-dark .admin-nav {
        background: #1a1a1a;
        color: white;
    }

    body.theme-dark .sidebar-toggle {
        background: #333;
    }

    body.theme-dark .burger-line {
        background: #d4a373;
    }
}