/**
 * Styles des cartes tickets pour le board Kanban BMad.
 * Gère l'apparence des cartes, priorités, animations drag-drop.
 */

/* ===== CARTE TICKET ===== */
.carte-ticket {
    background-color: var(--fond-carte);
    border-radius: var(--bordure-radius);
    padding: var(--espacement-sm);
    box-shadow: var(--ombre-carte);
    cursor: grab;
    transition: all 200ms ease;
    border-left: 4px solid transparent;
    display: flex;
    flex-direction: column;
    gap: var(--espacement-xs);
}

.carte-ticket:hover {
    box-shadow: var(--ombre-hover);
    transform: translateY(-2px);
}

.carte-ticket:active {
    cursor: grabbing;
}

.carte-ticket.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.carte-ticket.moving {
    opacity: 0.7;
    transform: scale(0.95);
}

.carte-ticket.moved-success {
    animation: flashSuccess 500ms ease;
}

.carte-ticket.moved-error {
    animation: flashError 500ms ease;
    border-left-color: var(--couleur-danger);
}

@keyframes flashSuccess {
    0%, 100% { background-color: var(--fond-carte); }
    50% { background-color: rgba(39, 174, 96, 0.2); }
}

@keyframes flashError {
    0%, 100% { background-color: var(--fond-carte); }
    50% { background-color: rgba(231, 76, 60, 0.2); }
}

/* ===== HEADER CARTE ===== */
.carte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--espacement-xs);
}

.carte-id {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texte-secondaire);
    background-color: var(--fond-principal);
    padding: 2px 6px;
    border-radius: 4px;
}

.carte-priorite {
    font-size: 1rem;
    line-height: 1;
}

/* ===== TITRE CARTE ===== */
.carte-titre {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texte-principal);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ===== FOOTER CARTE ===== */
.carte-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacement-xs);
    flex-wrap: wrap;
}

.carte-module {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: var(--couleur-info);
    color: var(--texte-inverse);
    font-weight: 600;
    text-transform: uppercase;
}

.carte-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tag-mini {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    background-color: var(--fond-principal);
    color: var(--texte-secondaire);
    font-weight: 500;
}

.tag-more {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    background-color: var(--texte-secondaire);
    color: var(--texte-inverse);
    font-weight: 600;
}

/* ===== BADGE GÉNÉRIQUE ===== */
.badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

/* ===== PRIORITÉS COULEURS ===== */
.priorite-critique {
    border-left-color: var(--couleur-danger);
}

.priorite-critique .carte-priorite {
    color: var(--couleur-danger);
}

.priorite-haute {
    border-left-color: var(--couleur-warning);
}

.priorite-haute .carte-priorite {
    color: var(--couleur-warning);
}

.priorite-moyenne {
    border-left-color: var(--couleur-success);
}

.priorite-moyenne .carte-priorite {
    color: var(--couleur-success);
}

.priorite-basse {
    border-left-color: var(--bordure-couleur);
}

.priorite-basse .carte-priorite {
    color: var(--bordure-couleur);
}

/* ===== ÉTATS CARTE ===== */
.carte-ticket:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

.carte-ticket[aria-selected="true"] {
    box-shadow: 0 0 0 3px var(--couleur-primaire);
}

/* ===== ANIMATIONS DRAG ===== */
.carte-ticket[draggable="true"] {
    cursor: grab;
}

.carte-ticket[draggable="true"]:active {
    cursor: grabbing;
}

/* ===== RESPONSIVE CARTES ===== */
@media (max-width: 768px) {
    .carte-ticket {
        padding: var(--espacement-md);
    }

    .carte-titre {
        font-size: 1rem;
    }

    .carte-module {
        font-size: 0.75rem;
    }
}