/*
 * Honneur - Liste des cotisations
 * Couche visuelle uniquement.
 */

/* ---------------------------------------------------------
   Résumé du statut
   --------------------------------------------------------- */

.honneur-cotisation-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;

    margin: 20px 0 24px;
    padding: 18px 20px;

    border: 1px solid #d7e0e7;
    border-radius: 14px;
    background: #fff;

    box-shadow: 0 6px 24px rgba(31, 50, 68, .07);
}

.honneur-cotisation-summary__title {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #24313d;
}

.honneur-cotisation-summary__text {
    grid-column: 1 / -1;

    margin-top: 2px;

    font-size: 14px;
    line-height: 1.5;
    color: #667583;
}

.honneur-payment-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    width: max-content;
    max-width: 100%;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
}

.honneur-payment-status::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: currentColor;
}

.honneur-payment-status.is-paid {
    color: #176b42;
    background: #eaf7f0;
    border: 1px solid #bde5ce;
}

.honneur-payment-status.is-pending {
    color: #8a5a08;
    background: #fff7df;
    border: 1px solid #eed99c;
}

.honneur-payment-status.is-unpaid {
    color: #a12828;
    background: #fff0f0;
    border: 1px solid #efc2c2;
}

.honneur-payment-status.is-unknown {
    color: #566675;
    background: #f1f4f6;
    border: 1px solid #d8e0e6;
}


/* ---------------------------------------------------------
   DataTable Cotisations
   --------------------------------------------------------- */

.dataTables_wrapper.honneur-cotisations-wrapper {
    width: 100%;
    margin-top: 12px;
}

table.honneur-cotisations-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    overflow: hidden;

    border: 1px solid #d7e0e7 !important;
    border-radius: 12px;

    background: #fff;
}

table.honneur-cotisations-table thead th {
    padding: 12px 14px !important;

    background: #f3f6f8 !important;

    color: #4b6173 !important;
    font-size: 13px;
    font-weight: 700;

    border-bottom: 1px solid #ced9e1 !important;
}

table.honneur-cotisations-table tbody td {
    padding: 13px 14px !important;

    color: #24313d;

    vertical-align: middle;

    border-bottom: 1px solid #e4e9ed !important;
}

table.honneur-cotisations-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

table.honneur-cotisations-table tbody tr:hover > td {
    background: #f8fafb;
}


/* Cotisation la plus récente */

table.honneur-cotisations-table tbody tr.honneur-latest-row > td {
    background: #f7fbfe;
}

table.honneur-cotisations-table tbody tr.honneur-latest-row > td:first-child {
    border-left: 3px solid #2f5f86 !important;
}


/* Badge placé sous l'année */

.honneur-row-payment-status {
    display: block;
    margin-top: 6px;
}


/* ---------------------------------------------------------
   Contrôle Responsive
   Le + vert / - rouge était ambigu avec l'état du paiement.
   --------------------------------------------------------- */

table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr > td.dtr-control::before,

table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr > th.dtr-control::before {

    content: "›" !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;

    top: 50% !important;
    left: 7px !important;

    transform: translateY(-50%);

    border: 0 !important;
    border-radius: 50% !important;

    background: #eaf2f8 !important;
    box-shadow: none !important;

    color: #2f5f86 !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
}

table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr.parent > td.dtr-control::before,

table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr.parent > th.dtr-control::before {

    content: "⌄" !important;

    background: #dceaf4 !important;
}


/* ---------------------------------------------------------
   Détails Responsive
   --------------------------------------------------------- */

table.honneur-cotisations-table tr.child td {
    padding: 5px 14px 14px 46px !important;

    background: #fafcfd !important;
}

table.honneur-cotisations-table ul.dtr-details {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

table.honneur-cotisations-table ul.dtr-details > li {
    display: grid !important;
    grid-template-columns: minmax(90px, 130px) 1fr;
    gap: 14px;

    padding: 9px 0 !important;

    border-bottom: 1px solid #e5eaee !important;
}

table.honneur-cotisations-table ul.dtr-details > li:last-child {
    border-bottom: 0 !important;
}

table.honneur-cotisations-table .dtr-title {
    font-weight: 700 !important;
    color: #536a7b !important;
}

table.honneur-cotisations-table .dtr-data {
    color: #24313d !important;
}


/* ---------------------------------------------------------
   Recherche + export
   --------------------------------------------------------- */

.honneur-cotisations-wrapper .dataTables_filter {
    margin-bottom: 14px;
}

.honneur-cotisations-wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    color: #607281;
    font-size: 14px;
}

.honneur-cotisations-wrapper .dataTables_filter input {
    min-width: 210px;

    padding: 9px 12px !important;

    border: 1px solid #c6d2db !important;
    border-radius: 9px !important;

    background: #fff !important;

    font-size: 14px;
    color: #24313d;
}

.honneur-cotisations-wrapper .dataTables_filter input:focus {
    border-color: #608bb0 !important;
    outline: none !important;

    box-shadow: 0 0 0 3px rgba(47,95,134,.12) !important;
}

.honneur-cotisations-wrapper .dt-buttons {
    margin-bottom: 14px;
}

.honneur-cotisations-wrapper .dt-button {
    padding: 8px 14px !important;

    border: 1px solid #c6d2db !important;
    border-radius: 8px !important;

    background: #fff !important;
    box-shadow: none !important;

    color: #334b5e !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

.honneur-cotisations-wrapper .dt-button:hover {
    border-color: #8ca8bd !important;
    background: #f3f7fa !important;
}


/* Le tfoot répète actuellement Année / Type / Section. */
table.honneur-cotisations-table tfoot {
    display: none !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .honneur-cotisation-summary {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .honneur-cotisation-summary .honneur-payment-status {
        margin-top: 6px;
    }

    .honneur-cotisation-summary__text {
        grid-column: auto;
    }

    .honneur-cotisations-wrapper .dataTables_filter {
        float: none !important;
        width: 100%;
    }

    .honneur-cotisations-wrapper .dataTables_filter label {
        align-items: stretch;
        flex-direction: column;
    }

    .honneur-cotisations-wrapper .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    table.honneur-cotisations-table thead th,
    table.honneur-cotisations-table tbody td {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    table.honneur-cotisations-table ul.dtr-details > li {
        grid-template-columns: 100px 1fr;
        gap: 10px;
    }
}

/* === Cotisation Checker authoritative summary 1.1 === */

.honneur-cotisation-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 8px;
}

.honneur-cotisation-summary__title {
    min-width: 0;
}

.honneur-cotisation-summary > .honneur-payment-status {
    justify-self: end;
}

@media (max-width: 700px) {

    .honneur-cotisation-summary {
        grid-template-columns: 1fr;
    }

    .honneur-cotisation-summary > .honneur-payment-status {
        justify-self: start;
    }
}

/* =========================================================
   Cotisations UI 1.2
   ========================================================= */

/* Seule l'année réellement courante selon Checker est accentuée. */

table.honneur-cotisations-table
tbody tr.honneur-latest-row > td {
    background: inherit;
}

table.honneur-cotisations-table
tbody tr.honneur-latest-row > td:first-child {
    border-left: 0 !important;
}

table.honneur-cotisations-table
tbody tr.honneur-current-cycle-row > td {
    background: #f3f8fc !important;
}

table.honneur-cotisations-table
tbody tr.honneur-current-cycle-row > td:first-child {
    border-left: 3px solid #2f5f86 !important;
}


/* Entrées historiques incomplètes */

.honneur-missing-year {
    display: block;

    max-width: 120px;

    color: #73828e;

    font-size: 12px;
    font-style: italic;
    line-height: 1.25;
}

table.honneur-cotisations-table
tr.honneur-year-missing > td {
    background: #fafbfc;
}


/* CTA du bandeau */

.honneur-cotisation-summary__action {
    grid-column: 1 / -1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: max-content;

    margin-top: 5px;

    padding: 9px 15px;

    border-radius: 9px;

    background: #2f5f86;

    color: #fff !important;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;

    text-decoration: none !important;

    transition:
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.honneur-cotisation-summary__action:hover {
    background: #244b6b;

    color: #fff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(47,95,134,.18);
}


/* Contrôle de détails */

table.honneur-cotisations-table
td.dtr-control {
    cursor: pointer;
}


/*
 * Tooltip uniquement sur appareil disposant
 * réellement d'un pointeur / hover.
 */
@media (hover: hover) and (pointer: fine) {

    table.honneur-cotisations-table
    td.dtr-control {
        position: relative;
    }

    table.honneur-cotisations-table
    td.dtr-control:hover::after {

        content:
            attr(data-honneur-details);

        position: absolute;

        z-index: 50;

        left: 12px;
        top: calc(100% - 4px);

        width: max-content;
        max-width: 180px;

        padding: 5px 8px;

        border-radius: 6px;

        background: #24313d;

        color: #fff;

        font-size: 11px;
        font-weight: 600;

        line-height: 1.25;

        white-space: nowrap;

        pointer-events: none;

        box-shadow:
            0 5px 15px
            rgba(31,50,68,.16);
    }
}


@media (max-width: 700px) {

    .honneur-cotisation-summary__action {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   Cotisations UI 1.2.1
   Alignement du chevron responsive sur la ligne de l'année
   ========================================================= */

table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr > td.dtr-control,
table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr > th.dtr-control {
    position: relative;
    padding-left: 42px !important;
}

table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr > td.dtr-control::before,
table.honneur-cotisations-table.dtr-inline.collapsed
> tbody > tr > th.dtr-control::before {
    top: 18px !important;
    left: 12px !important;
    transform: none !important;
}

table.honneur-cotisations-table
.honneur-row-payment-status {
    margin-top: 7px;
}

table.honneur-cotisations-table
.honneur-missing-year {
    margin-top: 6px;
}

@media (max-width: 700px) {
    table.honneur-cotisations-table.dtr-inline.collapsed
    > tbody > tr > td.dtr-control,
    table.honneur-cotisations-table.dtr-inline.collapsed
    > tbody > tr > th.dtr-control {
        padding-left: 40px !important;
    }

    table.honneur-cotisations-table.dtr-inline.collapsed
    > tbody > tr > td.dtr-control::before,
    table.honneur-cotisations-table.dtr-inline.collapsed
    > tbody > tr > th.dtr-control::before {
        top: 17px !important;
        left: 10px !important;
    }
}

/* === Cotisations UI - lignes DataTables réellement vides === */

table.honneur-cotisations-table
tbody > tr.honneur-empty-row {
    display: none !important;
}

/* =========================================================
   Cotisations UI 1.2.2
   Nettoyage du header technique DataTables + recherche
   ========================================================= */


/*
 * DataTables conserve une copie du THEAD dans la zone scrollBody
 * uniquement pour calculer les largeurs de colonnes.
 *
 * Notre style général des TH lui redonnait une hauteur visible,
 * d'où la bande vide sous le véritable en-tête.
 *
 * On garde la largeur calculée, mais on supprime uniquement
 * sa hauteur verticale.
 */
.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table
thead th,

.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table
thead td {

    height: 0 !important;
    min-height: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    border-top: 0 !important;
    border-bottom: 0 !important;

    line-height: 0 !important;
    font-size: 0 !important;

    overflow: hidden !important;
}


/*
 * Les flèches de tri du header technique doivent également
 * rester invisibles.
 */
.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table
thead th::before,

.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table
thead th::after {

    display: none !important;
}


/*
 * Quelques années maximum par utilisateur :
 * le moteur de recherche n'apporte rien ici.
 */
.honneur-cotisations-wrapper
.dataTables_filter {
    display: none !important;
}


/*
 * Pas de marge résiduelle laissée par la recherche masquée.
 */
.honneur-cotisations-wrapper
.dataTables_filter + * {
    margin-top: 0;
}


/* =========================================================
   Cotisations UI 1.2.3
   Synchronisation largeur DataTables
   ========================================================= */

/*
 * DataTables crée deux tables :
 * - une pour l'en-tête ;
 * - une pour le corps.
 *
 * Les deux doivent occuper exactement la même largeur.
 */

.honneur-cotisations-wrapper,
.honneur-cotisations-wrapper .dataTables_scroll,
.honneur-cotisations-wrapper .dataTables_scrollHead,
.honneur-cotisations-wrapper .dataTables_scrollBody,
.honneur-cotisations-wrapper .dataTables_scrollHeadInner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.honneur-cotisations-wrapper
.dataTables_scrollHeadInner {
    padding-right: 0 !important;
}

.honneur-cotisations-wrapper
.dataTables_scrollHead table,

.honneur-cotisations-wrapper
.dataTables_scrollBody table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/*
 * Évite qu'une largeur inline calculée par DataTables
 * réduise artificiellement la table du corps.
 */
.honneur-cotisations-wrapper
table.honneur-cotisations-table {
    width: 100% !important;
}


/*
 * Le scroll horizontal n'est pas nécessaire dans cette vue
 * lorsque Responsive a déjà masqué les colonnes secondaires.
 */
.honneur-cotisations-wrapper
.dataTables_scrollBody {
    overflow-x: hidden !important;
}


/* La bordure droite doit suivre le tableau complet. */
.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table {
    border-right: 1px solid #d7e0e7 !important;
}


/* =========================================================
   Cotisations UI 1.2.4
   Arrondis DataTables
   ========================================================= */

/* En-tête */
.honneur-cotisations-wrapper
.dataTables_scrollHead {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

/* Corps */
.honneur-cotisations-wrapper
.dataTables_scrollBody {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
}

/* Dernière ligne : coins inférieurs */
.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table
tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px !important;
}

.honneur-cotisations-wrapper
.dataTables_scrollBody
table.honneur-cotisations-table
tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px !important;
}

/* Sécurise aussi le coin supérieur droit du vrai header */
.honneur-cotisations-wrapper
.dataTables_scrollHead
table thead th:last-child {
    border-top-right-radius: 12px !important;
}

.honneur-cotisations-wrapper
.dataTables_scrollHead
table thead th:first-child {
    border-top-left-radius: 12px !important;
}