/* ════════════════════════════════════════════════════════════════
   EDUCATED — « MES DEMANDES DE DOCUMENTS » EN CARTES

   Rien ici ne s'applique tant que demandes-cards.js n'a pas posé la
   classe .edd-cards sur la grille. Script retiré ou coupé
   (window.EDUCATED_DEMANDES_CARDS = false), la grille XAF revient
   exactement comme avant.

   Le tableau RESTE un tableau : la carte vit dans la cellule du type
   de document, qui s'étend sur toute la largeur ; les autres cellules
   sont masquées. Et ici la ligne EST cliquable — l'apprenant rouvre
   sa demande, en lecture seule côté serveur.
   ════════════════════════════════════════════════════════════════ */


/* ── Ce qui disparaît ───────────────────────────────────────────── */

.edd-cards thead {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.edd-cards tbody tr > td:not(.edd-host) {
    display: none !important;
}

.edd-cards tr.dxbl-grid-empty-row {
    display: none !important;
}

/* Le filtre. La ligne entière sort de l'écran — pas la carte seule :
   une ligne vide de 1 px laisse des trous dans la liste. */
.edd-cards tbody tr.edd-off {
    display: none !important;
}

.edd-cards,
.edd-cards table {
    border: 0 !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.edd-cards tbody tr {
    background: transparent !important;
    /* Le clic ouvre la fiche : le curseur doit le dire. */
    cursor: pointer !important;
}


/* ── La largeur suit la fenêtre ─────────────────────────────────── */

.edd-cards colgroup col { width: auto !important; }

.edd-cards table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

.edd-cards { overflow-x: hidden !important; }


/* ── La cellule qui porte la carte ──────────────────────────────── */

/* La classe est répétée pour peser plus lourd que grid.css, qui cible
   td.xaf-action avec ses propres !important. Entre deux !important,
   c'est le plus spécifique qui gagne. */
.edd-cards td.edd-host.edd-host.edd-host {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
}

.edd-cards td.edd-host > *:not(.edd-card) {
    display: none !important;
}


/* ── La carte ───────────────────────────────────────────────────── */

.edd-cards .edd-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 18px;
    margin: 0 0 12px;
    padding: 16px 19px;
    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--line, #E5E7EB);
    border-left: 3px solid var(--ink-4, #CBD5E1);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    font-family: "Geist", "Public Sans", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-1, #1E293B);
    text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease;
}

/* Le filet gauche dit l'état avant toute lecture. */
.edd-cards .edd-card.edd-t-ouvert  { border-left-color: var(--ink-4, #CBD5E1); }
.edd-cards .edd-card.edd-t-encours { border-left-color: var(--warning, #B45309); }
.edd-cards .edd-card.edd-t-traite  { border-left-color: var(--success, #059669); }

.edd-cards tbody tr:hover .edd-card {
    border-color: var(--ink-4, #CBD5E1);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .09);
}


/* ── Le bloc date — la date de dépôt ────────────────────────────── */

.edd-cards .edd-when {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    min-width: 62px;
    padding: 9px 10px 10px;
    background: var(--surface-3, #F3F5F9);
    border-radius: 11px;
    align-self: start;
}

.edd-cards .edd-d {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--ink-1, #1E293B);
    font-variant-numeric: tabular-nums;
}

.edd-cards .edd-m {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #94A3B8);
}

.edd-cards .edd-when.edd-vide .edd-q {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink-4, #CBD5E1);
    line-height: 1.3;
}


/* ── Le corps ───────────────────────────────────────────────────── */

.edd-cards .edd-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.edd-cards .edd-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.edd-cards .edd-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-0, #0F172A);
    overflow-wrap: anywhere;
}


/* ── La pastille de statut ──────────────────────────────────────── */

.edd-cards .edd-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    background: var(--surface-3, #F3F5F9);
    color: var(--ink-2, #475569);
    white-space: nowrap;
}

.edd-cards .edd-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-3, #94A3B8);
    flex: none;
}

.edd-cards .edd-state.edd-encours {
    background: var(--warning-soft, #FBE9CC);
    color: var(--warning, #B45309);
}
.edd-cards .edd-state.edd-encours::before { background: var(--warning, #B45309); }

.edd-cards .edd-state.edd-traite {
    background: var(--success-soft, #D0F4E2);
    color: var(--success, #059669);
}
.edd-cards .edd-state.edd-traite::before { background: var(--success, #059669); }


/* ── Le motif ───────────────────────────────────────────────────── */

.edd-cards .edd-motif {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2, #475569);
    padding-left: 11px;
    border-left: 2px solid var(--line, #E5E7EB);
    overflow-wrap: anywhere;
}


/* ── Les puces de détail ────────────────────────────────────────── */

.edd-cards .edd-facts { display: flex; flex-wrap: wrap; gap: 6px; }

.edd-cards .edd-fact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-2, #475569);
    background: var(--surface-3, #F3F5F9);
    border-radius: 20px;
    padding: 4px 11px;
    min-width: 0;
}

.edd-cards .edd-fact b {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3, #94A3B8);
}

.edd-cards .edd-fact .edd-v {
    font-weight: 600;
    color: var(--ink-1, #1E293B);
    overflow-wrap: anywhere;
}


/* ── La phrase de retrait ───────────────────────────────────────── */

.edd-cards .edd-outcome {
    align-self: flex-start;
    max-width: 100%;
    margin-top: 2px;
    padding: 10px 13px;
    border-radius: 11px;
    background: var(--success-soft, #D0F4E2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--success, #059669);
}


/* ── La barre de l'écran ────────────────────────────────────────── */

.edd-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 16px 6px;
}

.edd-bar-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.edd-h1 {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink-0, #0F172A);
}

.edd-total {
    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: 3px 9px;
    font-variant-numeric: tabular-nums;
}


/* ── Le filtre par statut ───────────────────────────────────────── */

.edd-filters { display: flex; flex-wrap: wrap; gap: 7px; }

.edd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Geist", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-2, #475569);
    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 20px;
    padding: 5px 11px;
    cursor: pointer;
}

.edd-chip .edd-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-3, #94A3B8);
    flex: none;
}

.edd-chip.edd-c-encours .edd-dot { background: var(--warning, #B45309); }
.edd-chip.edd-c-traite  .edd-dot { background: var(--success, #059669); }
.edd-chip.edd-c-tout    .edd-dot { display: none; }

.edd-chip .edd-n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-3, #94A3B8);
    font-variant-numeric: tabular-nums;
}

.edd-chip[aria-pressed="true"] {
    background: var(--ink-0, #0F172A);
    border-color: var(--ink-0, #0F172A);
    color: #FFFFFF;
}

.edd-chip[aria-pressed="true"] .edd-n { color: rgba(255, 255, 255, .62); }

/* Un état sans aucune demande : la puce reste lisible — elle dit « zéro »,
   ce qui est une information — mais elle ne se clique pas. */
.edd-chip:disabled {
    opacity: .45;
    cursor: default;
}

.edd-chip:focus-visible {
    outline: 2px solid var(--brand, #4F46E5);
    outline-offset: 2px;
}


/* ── L'état vide ────────────────────────────────────────────────── */

.edd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: var(--surface-1, #FFFFFF);
    border: 1px dashed var(--ink-4, #CBD5E1);
    border-radius: 13px;
    padding: 30px 22px;
    font-family: "Geist", system-ui, sans-serif;
}

.edd-empty .edd-e-t {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-1, #1E293B);
}

.edd-empty .edd-e-s {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2, #475569);
    max-width: 46ch;
}


/* ── Étroit ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .edd-cards .edd-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 15px;
    }
    .edd-cards .edd-when {
        grid-row: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }
}