/* ============================================================
   Conteneur du composite scheduler + panneau
   ------------------------------------------------------------
   Hauteur bornée : le panneau défile chez lui au lieu d'étirer
   la page. Ajustez la soustraction selon la hauteur de votre
   en-tête + barre d'outils + onglets.
   ============================================================ */

.scheduler-with-prototypes {
    height: calc(100vh - 300px);
    min-height: 460px;
    display: flex;
    flex-direction: column;
}

    .scheduler-with-prototypes .swp-splitter {
        flex: 1 1 auto;
        min-height: 0; /* indispensable : sans ça le flex refuse de rétrécir */
    }

    .scheduler-with-prototypes .swp-pane {
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

    /* Le scheduler gère son propre défilement interne */
    .scheduler-with-prototypes .swp-pane-scheduler {
        overflow: hidden;
    }

    /* Le panneau des prototypes : défilement vertical propre */
    .scheduler-with-prototypes .swp-pane-prototypes {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain; /* le scroll ne "déborde" pas sur la page */
        padding: 4px 2px;
        scrollbar-width: thin;
    }

        .scheduler-with-prototypes .swp-pane-prototypes::-webkit-scrollbar {
            width: 8px;
        }

        .scheduler-with-prototypes .swp-pane-prototypes::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgb(16 24 40 / .2);
        }

            .scheduler-with-prototypes .swp-pane-prototypes::-webkit-scrollbar-thumb:hover {
                background: rgb(16 24 40 / .32);
            }

        /* La vue XAF imbriquée doit occuper toute la hauteur du volet */
        .scheduler-with-prototypes .swp-pane-prototypes .nested-frame,
        .scheduler-with-prototypes .swp-pane-prototypes .nested-content {
            height: 100%;
            min-height: 0;
        }

/* ============================================================
   Cartes de prototypes de séances (panneau du scheduler)
   Utilisé par EventPrototypePreviewComponent.razor
   ------------------------------------------------------------
   Variables fournies en inline par le composant :
     --accent   : couleur de la nature de séance (AppointmentType)
     background : couleur de la matière (Content)
   ============================================================ */

.modern-session-card {
    --card-radius: 10px;
    --card-pad: 10px;
    --ink: #14181f;
    --ink-soft: #4b5563;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--card-radius);
    padding-left: 6px; /* place pour la bande d'accent */
    overflow: hidden;
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 1px 3px rgb(16 24 40 / .06);
    transition: box-shadow .18s ease, transform .18s ease;
}

    .modern-session-card:hover {
        box-shadow: 0 4px 10px rgb(16 24 40 / .12), 0 2px 4px rgb(16 24 40 / .08);
        transform: translateY(-1px);
    }

    .modern-session-card:active {
        cursor: grabbing;
        transform: none;
    }

    /* Bande verticale colorée par la nature de séance */
    .modern-session-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: var(--accent, #2979ff);
    }

    /* Voile clair par-dessus la couleur de matière : garde le texte lisible
   quelle que soit la couleur de fond choisie. */
    .modern-session-card .contentCard {
        display: flex;
        flex-direction: column;
        gap: 5px;
        height: 100%;
        box-sizing: border-box;
        padding: var(--card-pad) calc(var(--card-pad) + 2px);
        background: rgb(255 255 255 / .86);
        backdrop-filter: saturate(1.15);
        color: var(--ink);
        font-size: .82rem;
        line-height: 1.25;
    }

    /* ---------- Ligne 1 : matière + volume horaire ---------- */

    .modern-session-card .top-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    .modern-session-card .subject {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 650;
        font-size: .875rem;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modern-session-card .hours {
        flex: 0 0 auto;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: .78rem;
        color: var(--accent, #2979ff);
        padding: 1px 6px;
        border-radius: 999px;
        background: rgb(255 255 255 / .75);
        box-shadow: inset 0 0 0 1px rgb(16 24 40 / .08);
    }

    /* ---------- Ligne 2 : classe et niveau ---------- */

    .modern-session-card .middle-row {
        color: var(--ink-soft);
        font-size: .78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---------- Enseignant ---------- */

    .modern-session-card .teacher {
        font-weight: 550;
        font-size: .78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---------- Ligne du bas : badges + avancement ---------- */

    .modern-session-card .bottom-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-top: auto;
    }

    .modern-session-card .badge {
        display: inline-flex;
        align-items: center;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.6;
        white-space: nowrap;
    }

        .modern-session-card .badge.type {
            color: #fff;
            background: var(--accent, #2979ff);
        }

        .modern-session-card .badge.subtle {
            color: var(--ink-soft);
            background: rgb(16 24 40 / .06);
            box-shadow: inset 0 0 0 1px rgb(16 24 40 / .08);
        }

    /* ---------- Barre d'avancement ---------- */

    .modern-session-card .progress-wrapper {
        flex: 1 1 120px;
        min-width: 90px;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .modern-session-card .progress-label {
        font-size: .68rem;
        color: var(--ink-soft);
        font-variant-numeric: tabular-nums;
    }

    .modern-session-card .progress-container {
        height: 5px;
        border-radius: 999px;
        background: rgb(16 24 40 / .1);
        overflow: hidden;
    }

    .modern-session-card .progress-fill {
        height: 100%;
        border-radius: inherit;
        background: var(--accent, #2979ff);
        transition: width .3s ease;
    }

/* ============================================================
   Grille du panneau des prototypes
   (classe posée par le list editor : gridModel.CssClass)
   ============================================================ */

.event-prototype-grid {
    --grid-gap: 6px;
}

    .event-prototype-grid .dxbl-grid-table > tbody > tr > td {
        border: none;
        padding: 3px 6px;
    }

    /* La ligne de détail porte la carte : on supprime le fond et les bordures
   par défaut pour que seule la carte soit visible. */
    .event-prototype-grid .dxbl-grid-detail-row > td {
        background: transparent;
        padding: 3px 6px 6px;
    }

    .event-prototype-grid .dxbl-grid-table > tbody > tr:hover > td {
        background: transparent;
    }

/* ============================================================
   Zones de dépôt du scheduler
   ============================================================ */

.scheduler-drop-zone-active {
    outline: 2px dashed var(--accent, #2979ff);
    outline-offset: -2px;
    background: rgb(41 121 255 / .06);
}

/* ============================================================
   Thème sombre
   ============================================================ */

@media (prefers-color-scheme: dark) {
    .modern-session-card {
        --ink: #e8eaed;
        --ink-soft: #9aa3af;
        box-shadow: 0 1px 2px rgb(0 0 0 / .4);
    }

        .modern-session-card .contentCard {
            background: rgb(24 27 33 / .82);
        }

        .modern-session-card .hours {
            background: rgb(255 255 255 / .1);
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
        }

        .modern-session-card .badge.subtle {
            background: rgb(255 255 255 / .08);
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
        }

        .modern-session-card .progress-container {
            background: rgb(255 255 255 / .14);
        }
}