/* ════════════════════════════════════════════════════════════════
   EDUCATED — PORTAIL APPRENANT : ADAPTATION ÉCRAN ÉTROIT
   Fichier additif : ne modifie aucun sélecteur existant.
   À charger APRÈS shell.css / topbar.css / ribbon.css / custom-items.css.

   Deux paliers, alignés sur ceux du framework :
     ≤ 900 px  → la page de démarrage passe en une colonne,
                 le ruban disparaît sur le dashboard,
                 cibles tactiles à 44 px.
     ≤ 576 px  → palier "sm" de Bootstrap, celui où XAF masque déjà
                 la sidebar : on y ajoute le bandeau de rubriques.

   La mise en page du dashboard est celle de DevExtreme :
     .dx-dashboard-layout-container (scrollview)
       └ .dx-layout > .dx-layout-group > .dx-layout-item-wrapper
           └ dx-layout-item > .dx-dashboard-item-container
               └ .dx-dashboard-item > .dx-dashboard-item-content
   Les tailles sont calculées en JS et posées en style inline :
   on neutralise les hauteurs et on force l'empilement.

   Aucune couleur en dur : tout vient de design-tokens.css.
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  1 · BANDEAU DE RUBRIQUES (rendu par Js/mobile-rubrics.js)   ║
   ╚══════════════════════════════════════════════════════════════╝ */

.edu-rubrics {
    display: none;
}

.edu-rubrics-inner {
    display: flex;
    gap: 7px;
    padding: 9px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .edu-rubrics-inner::-webkit-scrollbar {
        display: none;
    }

.edu-rubric {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: "Geist", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 13px;
    border-radius: 20px;
    border: 1px solid var(--line, #E5E7EB);
    background: var(--surface-2, #FAFBFD);
    color: var(--ink-2, #475569);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .edu-rubric:active {
        transform: scale(.97);
    }

    .edu-rubric.is-active {
        background: var(--brand-soft, #EEEAFF);
        border-color: var(--brand-line, #DAD4FF);
        color: var(--brand, #4F46E5);
    }

.edu-rubric-more {
    background: transparent;
    border-style: dashed;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  2 · PALIER ≤ 900 px                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {

    /* ── 2.1 Mise en page du dashboard ───────────────────────────
       RETIRÉ. Forcer l'empilement par CSS casse le layout DevExtreme :
       les tailles sont calculées en JS et posées en style inline, et
       neutraliser les hauteurs fait disparaître les items.
       L'empilement passera par le mode mobile natif du DashboardControl,
       activé côté JS — voir dashboard-events-scripts.js.
       En attendant, le dashboard garde son défilement horizontal. */

    /* ── 2.2 Rien ne dépasse en largeur ──────────────────────────
       La mise en page mobile empile les items, mais les conteneurs
       XAF au-dessus gardent une largeur calculée pour le bureau :
       d'où la barre de défilement horizontale et les cartes coupées
       à droite. On les borne à la largeur de l'écran. */

    .main,
    .main-content,
    .detail-view-content,
    .xaf-dashboard-container,
    .dx-dashboard-surface,
    .dx-dashboard-widget-container,
    .dx-dashboard-viewer,
    .dx-dashboard-container,
    .dx-dashboard-layout-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .dx-dashboard-item,
    .dx-dashboard-item-container {
        max-width: 100% !important;
    }

    /* Nos custom items respirent un peu moins large */
    .educated-welcome-host,
    .educated-alerts-host,
    .educated-cue-host,
    .educated-nav-host {
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ── 2.2 bis Pas de cadre autour du cadre ────────────────────
       En mise en page mobile, DevExpress dessine sa propre carte
       autour de chaque item : fond, bordure, ombre. Nos custom items
       ont déjà la leur (.d6-hero et compagnie), d'où le double cadre.
       On efface celle de DevExpress, seulement pour nos items. */

    .dx-dashboard-item:has(.educated-welcome-host),
    .dx-dashboard-item:has(.educated-alerts-host),
    .dx-dashboard-item:has(.educated-cue-host),
    .dx-dashboard-item:has(.educated-nav-host),
    .dx-dashboard-item-container:has(.educated-welcome-host),
    .dx-dashboard-item-container:has(.educated-alerts-host),
    .dx-dashboard-item-container:has(.educated-cue-host),
    .dx-dashboard-item-container:has(.educated-nav-host),
    .dx-dashboard-item-content:has(.educated-welcome-host),
    .dx-dashboard-item-content:has(.educated-alerts-host),
    .dx-dashboard-item-content:has(.educated-cue-host),
    .dx-dashboard-item-content:has(.educated-nav-host),
    [class*="dx-dashboard-mobile"]:has(.educated-welcome-host),
    [class*="dx-dashboard-mobile"]:has(.educated-alerts-host),
    [class*="dx-dashboard-mobile"]:has(.educated-cue-host),
    [class*="dx-dashboard-mobile"]:has(.educated-nav-host) {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Le texte du bandeau va à la ligne au lieu d'être coupé */
    .educated-welcome-host,
    .educated-welcome-host p,
    .educated-welcome-host span,
    .educated-welcome-host h1,
    .educated-welcome-host h2,
    .educated-welcome-host h3 {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* ── 2.3 Le ruban disparaît quand l'onglet actif est un dashboard
       (Exporter/Importer XML, onglet « Vue » : outillage d'admin).
       Ailleurs il reste : la recherche des listes y vit. */

    .app:has(.dxbl-tabs-content.dxbl-active .dx-dashboard-viewer) .xaf-ribbon {
        display: none !important;
    }

    /* ── 2.4 Cibles tactiles ─────────────────────────────────── */

    .xaf-sidebar .dxbl-accordion-item-content,
    .xaf-sidebar .dxbl-accordion-group-header {
        min-height: 44px !important;
    }

    /* ── 2.5 Onglets de vues et grilles : défilement horizontal ── */

    .dxbl-tabs-container,
    .dxbl-tabs .dxbl-scroll-viewer-content {
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .dxbl-grid {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  3 · PALIER ≤ 576 px — celui où XAF masque déjà la sidebar   ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 576px) {

    .edu-rubrics {
        display: block;
        background: var(--surface-1, #FFFFFF);
        border-bottom: 1px solid var(--line, #E5E7EB);
        position: fixed;
        top: var(--edu-rubrics-top, 56px);
        left: 0;
        right: 0;
        z-index: 1030;
    }

    /* On réserve la hauteur du bandeau sous l'en-tête */
    .app > .xaf-flex-auto,
    #main-window-template-component > .xaf-flex-auto {
        padding-top: var(--edu-rubrics-height, 46px) !important;
    }

    /* En-tête compact : logo, compte, réglages suffisent */
    .header.navbar-dark,
    .header {
        padding: 0 10px !important;
        gap: 6px !important;
        min-height: 56px !important;
    }

    .header .btn-hamburger img {
        width: 34px !important;
        height: 34px !important;
    }

    .header .school-info,
    .header .view-caption-root {
        display: none !important;
    }

    /* Plus de marges perdues autour du contenu */
    .main-content,
    .detail-view-content,
    .dx-dashboard-surface {
        padding: 0 !important;
    }

    /* Le tiroir de navigation couvre l'écran au lieu d'une colonne écrasée */
    #main-window-template-component .xaf-sidebar.d-flex,
    .app .xaf-sidebar:not(.d-none) {
        position: fixed !important;
        inset: 56px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1040 !important;
        border-right: 0 !important;
        overflow-y: auto !important;
    }
}