/* ==========================================================================
   mobile.css — Couche responsive globale (téléphone / tablette / PC)
   Chargée en dernier par includes/header.php. N'altère pas le rendu PC :
   les règles ne s'activent que sous 1024 px (sauf garde-fous de débordement).
   ========================================================================== */

/* ---------- Garde-fous généraux ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, iframe, embed, object { max-width: 100%; }
img:not(.logo):not([width]):not([height]) { height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.container, .container-fluid { width: 100%; }

/* ---------- Tableaux : défilement horizontal propre ---------- */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}
.table-scroll > table { margin-bottom: 0; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(10,36,114,.35); border-radius: 8px; }

/* ---------- Tablettes et petits écrans (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
    .container, .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }

    /* Grilles : s'adaptent à la largeur disponible */
    [class*="grid"]:not([class*="calendar"]):not([class*="edt"]):not([class*="planning"]):not([class*="timetable"]):not([class*="emploi"]):not(.fc):not([class*="col-"]):not(.row):not(.stats-grid):not(.quick-actions-grid):not(.actions-grid):not(.stats-cards):not(.kpi-grid) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    }

    /* Mises en page à deux colonnes (contenu + colonne latérale) */
    .dashboard-layout, .page-layout, .two-columns, .split-layout, .main-layout {
        flex-direction: column !important;
    }
    .grid-left, .grid-right, .dashboard-main, .dashboard-aside { width: 100% !important; max-width: 100% !important; }

    /* Barres d'outils / filtres / entêtes : retour à la ligne */
    .filters-form, .filters-card form, .filter-row, .form-row, .toolbar, .card-header,
    .card-header-custom, .page-header, .section-header, .header-actions, .actions,
    .btn-group, .tabs, .nav-tabs, .stats-row, .hero-actions, .pagination {
        flex-wrap: wrap !important;
        gap: 10px;
    }
    .filter-group, .form-group { min-width: min(100%, 200px); flex: 1 1 200px; }
}

/* ---------- Téléphones (≤ 768 px) ---------- */
@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 1.55rem !important; line-height: 1.25; }
    h2 { font-size: 1.3rem !important; line-height: 1.3; }
    h3 { font-size: 1.1rem !important; }

    section, .dashboard-section, .hero, .page-hero { padding-left: 0 !important; padding-right: 0 !important; }
    .card, .dashboard-card, .filters-card, .stat-card { padding-left: 14px; padding-right: 14px; }
    .card-body, .card-header { padding: 12px !important; }

    /* Champs de formulaire : taille lisible, pas de zoom iOS */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control { width: 100%; }
    button, .btn, a.btn, [class*="btn-"], .quick-action { min-height: 40px; }
    .btn, a.btn, button { white-space: normal; }

    /* Boutons d'action en pleine largeur dans les formulaires et filtres */
    .filters-form .btn, .filters-form button, .form-actions .btn, .form-actions button { width: 100%; }

    /* Fenêtres modales */
    .modal-content, .modal-dialog, .modal-box, .modal-container, [class*="modal"] > div {
        max-width: 96vw !important;
        width: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .modal-content, .modal-box, .modal-container { max-height: 92vh; overflow-y: auto; }

    /* Tableaux plus compacts */
    table th, table td { padding: 8px 10px; font-size: 13px; }
    .table-scroll table { min-width: 560px; }

    /* Cartes de statistiques : 2 par ligne */
    .stats-grid, .quick-actions-grid, .actions-grid, .stats-cards, .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Menus latéraux éventuels */
    .dashboard-sidebar, .sidebar { width: 100% !important; position: static !important; }

    /* Graphiques */
    canvas { max-width: 100% !important; height: auto !important; }

    /* Notifications / alertes */
    .alert, .toast, .flash { max-width: calc(100vw - 20px); }
}

/* ---------- Petits téléphones (≤ 480 px) ---------- */
@media (max-width: 480px) {
    .stats-grid, .quick-actions-grid, .actions-grid, .stats-cards, .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .quick-action span, .stat-label { font-size: 12px; }
    .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    .breadcrumb, .hero-breadcrumb { flex-wrap: wrap; font-size: 12px; }
}

/* ---------- Très petits écrans (≤ 360 px) ---------- */
@media (max-width: 360px) {
    .stats-grid, .quick-actions-grid, .actions-grid, .stats-cards, .kpi-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Impression : pas de défilement ---------- */
@media print {
    .table-scroll { overflow: visible !important; }
    .table-scroll table { min-width: 0 !important; }
}