/* ════════════════════════════════════════════════════════════════
   EDUCATED — MA JOURNÉE · DERNIERS SUPPORTS · PROCHAIN COURS
   Trois affichages du même bloc de données (window.educatedHome).
   Aucune couleur en dur : tout vient de design-tokens.css.
   ════════════════════════════════════════════════════════════════ */

.educated-day-host,
.educated-supports-host {
    height: 100%;
    font-family: "Geist", "Public Sans", system-ui, sans-serif;
    box-sizing: border-box;
}

    .educated-day-host *,
    .educated-supports-host * {
        box-sizing: border-box;
    }

/* ── Le panneau ─────────────────────────────────────────────── */

.eh-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 14px;
    overflow: hidden;
}

.eh-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px 11px;
}

.eh-title {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3, #94A3B8);
}

.eh-count {
    margin-left: auto;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3, #94A3B8);
    background: var(--surface-3, #F3F5F9);
    border-radius: 20px;
    padding: 2px 8px;
}

.eh-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 18px 14px;
}

.eh-empty {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 13px;
    color: var(--ink-3, #94A3B8);
}

/* ── Ma journée : une ligne par séance ──────────────────────── */

.eh-slot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line, #E5E7EB);
}

    .eh-slot:last-child {
        border-bottom: 0;
    }

.eh-slot-time {
    flex: none;
    width: 46px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 1px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.eh-slot-start {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-1, #1E293B);
}

.eh-slot-end {
    font-size: 11px;
    color: var(--ink-4, #CBD5E1);
}

.eh-slot-bar {
    flex: none;
    width: 3px;
    align-self: stretch;
    border-radius: 3px;
    background: var(--line-2, #DDE2EA);
}

.eh-slot-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eh-slot-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-0, #0F172A);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eh-slot-meta {
    font-size: 12.5px;
    color: var(--ink-2, #475569);
}

.eh-flag {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--warning, #B45309);
    background: var(--warning-soft, #FBE9CC);
    border-radius: 20px;
    padding: 3px 7px;
}

.eh-slot-now {
    flex: none;
    align-self: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand, #4F46E5);
    background: var(--brand-soft, #EEEAFF);
    border-radius: 20px;
    padding: 4px 9px;
}

/* États : terminé, en cours, à venir */

.eh-slot--done {
    opacity: .5;
}

    .eh-slot--done .eh-slot-bar {
        background: var(--success, #059669);
    }

.eh-slot--live .eh-slot-bar {
    background: var(--brand, #4F46E5);
}

.eh-slot--next .eh-slot-bar {
    background: var(--brand-soft-2, #DAD4FF);
}

/* ── Derniers supports ──────────────────────────────────────── */

.eh-doc {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line, #E5E7EB);
    cursor: pointer;
}

    .eh-doc:last-child {
        border-bottom: 0;
    }

    .eh-doc:hover .eh-doc-title {
        color: var(--brand, #4F46E5);
    }

.eh-doc-ico {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--brand, #4F46E5);
    background: var(--brand-soft, #EEEAFF);
}

.eh-doc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eh-doc-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-0, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-doc-meta {
    font-size: 12px;
    color: var(--ink-2, #475569);
}

.eh-doc-new {
    flex: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--success, #059669);
    background: var(--success-soft, #D0F4E2);
    border-radius: 20px;
    padding: 4px 8px;
}

/* ════════════════════════════════════════════════════════════════
   PROCHAIN COURS — dans le bandeau de bienvenue (welcome-item.js)
   ════════════════════════════════════════════════════════════════ */

.ew-next {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* Resserré volontairement : dans le dashboard, la hauteur de l'item est
       fixée par la mise en page, et c'est ce bloc qui poussait le bouton
       « Actions rapides » hors du cadre. */
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--brand-line, #DAD4FF);
    background: var(--brand-soft, #EEEAFF);
    border-radius: 13px;
}

.ew-next-when {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--gradient-brand, linear-gradient(135deg, #5955FF 0%, #3B2B9A 100%));
    border-radius: 20px;
    padding: 5px 11px;
    white-space: nowrap;
}

.ew-next-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7CF7C4;
}

.ew-next-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-0, #0F172A);
}

.ew-next-meta {
    font-size: 13px;
    color: var(--ink-2, #475569);
}

.ew-next-empty {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px dashed var(--line-2, #DDE2EA);
    border-radius: 13px;
    font-size: 13px;
    color: var(--ink-3, #94A3B8);
}

/* Écran étroit : le bloc passe en colonne */
@media (max-width: 900px) {
    .ew-next {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}


/* Ascenseur interne discret — la hauteur des items est fixée par la mise en
   page du dashboard, donc une liste longue défile ; autant que ça ne se voie
   pas comme une barre grise en plein milieu de la carte. */
.eh-list {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2, #DDE2EA) transparent;
}

    .eh-list::-webkit-scrollbar {
        width: 6px;
    }

    .eh-list::-webkit-scrollbar-thumb {
        background: var(--line-2, #DDE2EA);
        border-radius: 3px;
    }

    .eh-list::-webkit-scrollbar-track {
        background: transparent;
    }


/* ════════════════════════════════════════════════════════════════
   RACCOURCIS — rendre à l'item la hauteur de son emplacement

   custom-items.css (l. 1193) et native-cards.css (l. 1609) forcent
   height: auto !important sur l'item des cues, à trois niveaux.
   L'item ignore alors la hauteur que la mise en page lui donne :
   il prend celle de son contenu, le total dépasse la fenêtre, le
   dashboard se met à défiler, et les poids des autres blocs sont
   calculés sur une hauteur déjà débordée.

   Ce fichier est chargé après les deux autres : l'override prend.
   Le contenu qui dépasse défile dans l'item plutôt que de pousser
   ses voisins.
   ════════════════════════════════════════════════════════════════ */

.dx-dashboard-item-container:has(.educated-cue-host),
.dx-dashboard-item:has(.educated-cue-host),
.dx-dashboard-item-content:has(.educated-cue-host) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.educated-cue-host {
    max-height: 100%;
    overflow: auto;
}