/* =====================================================================
   Plomberie du kanban DevExpress (adapté de l'exemple blazor-kanban-board)
   restylée avec les tokens de la maquette (voir app.css).
   ===================================================================== */

/* Carte englobante posée par le composant — le style visuel vient de .card (app.css) */
.dx-card {
    overflow: hidden;
    margin: 0 !important;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    cursor: grab;
}

/* En-têtes de colonnes : style "col-head" de la maquette */
.kanban-header-cell {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-2) !important;
    padding: 12px 14px !important;
}

/* Corps de colonne — vertical-align:top : sans lui, les cellules du tableau racine
   centrent verticalement leur grille imbriquée (colonnes "flottantes" à mi-hauteur) */
.kanban-data-cell {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    padding: 4px 10px 12px !important;
    vertical-align: top !important;
}

.dxbl-grid[data-dx-focus-hidden] th.kanban-header-cell:focus-visible {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.dxbl-grid[data-dx-focus-hidden] td.kanban-data-cell:focus-visible,
.dxbl-grid[data-dx-focus-hidden] td.kanban-data-cell:focus-within {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Fantôme de drag */
.kanban-drag-hint .dxbl-grid-row-drag-hint-drag-anchor { display: none; }
.kanban-drag-hint {
    padding: 0;
    width: 250px;
    box-shadow: var(--shadow-lg);
    border-radius: 9px;
}

/* La poignée étirée (voir DxKanban.razor.js) doit recevoir les événements souris.
   On neutralise la sélection de texte dans les cartes pendant le drag. */
.kanban-column-grid .card, .kanban-column-grid .dx-card { user-select: none; }

/* Grille racine : les colonnes côte à côte */
.kanban-layout-grid {
    border: none;
    height: calc(100vh - 150px);
    background: transparent;
}

.kanban-layout-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table {
    border-collapse: separate;
    border-spacing: 14px 0px;
    border: none;
    /* Colonnes de largeur identique occupant toute la place disponible,
       avec un plancher : en dessous, défilement horizontal plutôt que cartes écrasées */
    width: 100%;
    table-layout: fixed;
    min-width: 1080px;
}

.kanban-layout-grid .dxbl-grid-empty-data-area { padding: 0.5rem; }

.kanban-layout-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr.dxbl-grid-empty-row > .dxbl-grid-empty-data-area * {
    display: none !important;
}

.kanban-layout-grid .dxbl-grid-empty-row { border: none; }

/* Grilles-colonnes (cartes) */
.kanban-column-grid {
    height: calc(100vh - 225px);
    background: transparent;
    border: none;
}

/* La carte visible est la copie placée dans la cellule d'ancrage (voir DxKanban.razor.js) ;
   la cellule d'origine est masquée pour éviter le doublon. Les événements souris doivent
   atteindre la cellule d'ancrage elle-même (écouteurs délégués), d'où pointer-events:none
   sur son contenu. */
.kanban-column-grid .kanban-drag-anchor { padding: 0 !important; width: 100% !important; cursor: grab; }
.kanban-column-grid .kanban-drag-anchor > * { pointer-events: none; }
.kanban-column-grid td.kanban-drag-anchor + td { display: none !important; }
.kanban-column-grid col:first-child { width: 100% !important; }
.kanban-column-grid col:first-child + col { width: 0px !important; }
.kanban-column-grid .dxbl-grid-header-row { display: none; }
.kanban-column-grid .dxbl-scroll-viewer { background: transparent !important; }

.kanban-column-grid .dxbl-grid-table {
    border: none !important;
    border-spacing: 0 9px;
    border-collapse: separate;
}

.kanban-column-grid .dxbl-grid-table tr { background: transparent !important; }
.kanban-column-grid .dxbl-grid-table td { background: transparent !important; }

/* Colonne vide : on masque l'icône "pas de données" de la grille imbriquée
   et on affiche un état vide discret, comme sur la maquette */
.kanban-column-grid .dxbl-grid-empty-data-area * { display: none !important; }
.kanban-column-grid .dxbl-grid-empty-row { border: none !important; }
.kanban-column-grid .dxbl-grid-empty-data-area {
    padding: 0 !important;
    background: transparent !important;
}
.kanban-column-grid .dxbl-grid-empty-data-area::after {
    content: "Rien à afficher";
    display: block;
    border: 1.5px dashed var(--border);
    border-radius: 9px;
    padding: 22px 12px;
    margin-top: 5px;
    text-align: center;
    color: var(--text-3);
    font-size: 12.5px;
}

/* Nos cartes à l'intérieur du kanban : reprennent .card de app.css,
   mais sans l'effet hover translate (gênant pendant le drag) */
.kanban-column-grid .card:hover { transform: none; }