/* ===== Hyvrade - Table dossiers ===== */

.hyvrade-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    background: #fff;

    border: 1px solid rgba(0,0,0,.08);

    overflow: hidden;

    font-size: 14px;

    margin-top: 1rem;

}



.hyvrade-table thead th {

    text-align: left;

    font-weight: 700;

    padding: 14px 16px;

    background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));

    border-bottom: 1px solid rgba(0,0,0,.08);

    white-space: nowrap;

    color: black;

    font-weight: 400;

}



.hyvrade-table tbody td {

    padding: 14px 16px;

    border-bottom: 1px solid rgba(0,0,0,.06);

    vertical-align: middle;

    color: black;

}



.hyvrade-table tbody tr:last-child td {

    border-bottom: none;

}



/* Colonnes */

.hyvrade-ref {

    font-weight: 700;

    letter-spacing: .2px;

}



.hyvrade-date {

    white-space: nowrap;

    color: rgba(0,0,0,.65);

}



/* Badge statut */

.hyvrade-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 10px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 12px;

    border: 1px solid rgba(0,0,0,.08);

}



.hyvrade-badge::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 999px;

    background: rgba(0,0,0,.35);

}



/* Variantes statut */

.hyvrade-badge.is-complete {

    background: rgba(25, 135, 84, .10);

    border-color: rgba(25, 135, 84, .25);

    color: #0f5132;

}

.hyvrade-badge.is-complete::before { background: #198754; }



.hyvrade-badge.is-progress {

    background: rgba(13, 110, 253, .10);

    border-color: rgba(13, 110, 253, .25);

    color: #084298;

}

.hyvrade-badge.is-progress::before { background: #0d6efd; }



.hyvrade-badge.is-draft {

    background: rgba(255, 193, 7, .14);

    border-color: rgba(255, 193, 7, .28);

    color: #664d03;

}

.hyvrade-badge.is-draft::before { background: #ffc107; }



.hyvrade-badge.is-rejected {

    background: rgba(220, 53, 69, .10);

    border-color: rgba(220, 53, 69, .25);

    color: #842029;

}

.hyvrade-badge.is-rejected::before { background: #dc3545; }



.hyvrade-badge.is-default {

    border-color: rgba(108, 117, 125, .25);

    color: #343a40;

}

.hyvrade-badge.is-default::before { background: #6c757d; }



/* Étape en pill */

.hyvrade-pill {

    display: inline-flex;

    min-width: 34px;

    justify-content: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 12px;

    background: rgba(0,0,0,.04);

    border: 1px solid rgba(0,0,0,.08);

}



/* Actions en boutons */

.hyvrade-actions {

    white-space: nowrap;

}



.hyvrade-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 10px;

    font-weight: 500;

    font-size: 13px;

    text-decoration: none !important;

    border: 1px solid rgba(0,0,0,.10);

    width: -webkit-fill-available;

}



.hyvrade-btn-primary {

    background: #111827;

    color: #fff !important;

    border-color: rgba(17, 24, 39, .25);

}



.hyvrade-btn-primary:hover {

    background: #0b1220;

}



.hyvrade-btn-ghost {

    background: #fff;

    color: #111827 !important;

}



.hyvrade-btn-ghost:hover {

    background: rgba(0,0,0,.03);

}



/* ===== Responsive : tableau -> cartes ===== */

@media (max-width: 860px) {

    .hyvrade-table thead {

        display: none;

    }



    .hyvrade-table,

    .hyvrade-table tbody,

    .hyvrade-table tr,

    .hyvrade-table td {

        display: block;

        width: 100%;

    }



    .hyvrade-table {

        border-radius: 14px;

    }



    .hyvrade-table tbody tr {

        border-bottom: 1px solid rgba(0,0,0,.08);

    }



    .hyvrade-table tbody tr:last-child {

        border-bottom: none;

    }



    .hyvrade-table tbody td {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 12px;

        border-bottom: 1px dashed rgba(0,0,0,.08);

    }



    .hyvrade-table tbody td:last-child {

        border-bottom: none;

    }



    /* Labels via attribut data-label si tu veux aller plus loin */

    /* Ici simple : on garde le contenu, et on met l'action en bas */

    .hyvrade-actions {

        justify-content: flex-end;

    }



    .hyvrade-actions .hyvrade-btn {

        width: auto;

    }

}