/* DIVERS */

a {
    text-decoration: none !important;
}

/* Groupes de boutons (hors tableau) */
.btn-group-gap{
    gap: .75rem;
}

.container {
    max-width: 80%;
}

@media (max-width: 1200px) {
    .container {
        max-width: 95%; /* Largeur ajustée à 95% pour les écrans de téléphone */
    }

    .card {
        flex: 1 1 100%; /* Chaque carte prend toute la largeur du conteneur */
        margin: 0 0 1rem; /* Espacement vertical entre les cartes */
        width: 100%; /* Force la largeur à 100% */
    }

}

.form-group {
    margin-bottom: 20px; /* Ajoute de l'espace entre les champs */
}

.tab_view tbody td {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   NAVIGATION (refonte)
   ========================= */

.navbar{
    background-color:#1f274c !important;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* contenu centré */
.navbar .container-fluid{
    max-width:90%;
    margin:0 auto;
}

/* aligner les liens à droite en desktop */
.navbar-expand-md .navbar-collapse{ justify-content:flex-end; }

/* gabarit uniforme liens / icône */
.navbar .navbar-nav{
    gap:.15rem; /* léger espacement entre onglets */
}

.navbar .navbar-nav .nav-link{
    color:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    height:56px;
    padding:0 .9rem;
    line-height:1;
    border-radius:.6rem;
    transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

/* hover */
.navbar .navbar-nav .nav-link:hover{
    color:#8fcbff;
    background-color:rgba(143,203,255,.10);
}

/* état actif : badge/pill lisible, pas juste du gras */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link[aria-current="page"]{
    color:#8fcbff;
    background-color:rgba(143,203,255,.16);
    font-weight:600;
}

/* petit feedback au clic */
.navbar .navbar-nav .nav-link:active{
    transform: translateY(1px);
}

/* dropdown toggle (settings) */
.navbar .navbar-nav .dropdown-toggle{
    gap:.35rem;
}

/* caret discret */
.navbar .navbar-nav .dropdown-toggle::after{
    opacity:.7;
}

/* menu dropdown : aligné à droite, dans la fenêtre */
.navbar .dropdown-menu{
    right:0 !important;
    left:auto !important;
    margin-top:.4rem;
    background-color:#2b324b;
    border:1px solid rgba(255,255,255,.10);
    border-radius:.75rem;
    padding:.45rem;
    box-shadow:0 16px 32px rgba(0,0,0,.25);
    max-width:calc(100vw - 24px);
    overflow:hidden;
}

/* items dropdown */
.navbar .dropdown-item{
    color:rgba(255,255,255,.92);
    border-radius:.55rem;
    padding:.55rem .75rem;
    transition: background-color .15s ease, color .15s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
    background-color:rgba(143,203,255,.14);
    color:#8fcbff;
}

/* séparateur dropdown plus doux */
.navbar .dropdown-divider{
    border-top:1px solid rgba(255,255,255,.10);
    margin:.4rem .2rem;
}

/* toggler */
.navbar-toggler{
    border-color:rgba(255,255,255,.35);
    border-radius:.6rem;
    padding:.35rem .6rem;
}

.navbar-toggler:focus{
    box-shadow:0 0 0 .15rem rgba(143,203,255,.25);
}

.navbar-toggler-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* mobile : dropdown pleine largeur utile, et liens bien espacés */
@media (max-width: 576px){
    .navbar .container-fluid{ max-width:100%; }
    .navbar .navbar-nav .nav-link{ height:52px; padding:0 .75rem; }
    .navbar .dropdown-menu{ width:calc(100vw - 24px); }
}

/* =========================
   FIN NAVIGATION
   ========================= */


/* =========================
   BADGES (centralisés)
   ========================= */

/* Base badge “pill” */
.badge-pill-custom{
    display:inline-block;
    padding:.25rem .5rem;
    border-radius:.45rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}

/* Thèmes (statuts) */
.badge-theme{ /* base commune thèmes */
    display:inline-block;
    padding:.25rem .5rem;
    border-radius:.45rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
    color:#fff;
    margin: 0 3px 3px 0;   /* droite + bas */
}

.badge-en-cours{ background-color:#dc3545; }
.badge-en-progres{ background-color:#fd7e14; }
.badge-acquis{ background-color:#28a745; }
.badge-autonome{ background-color:#6f42c1; }
.badge-default{ background-color: #838c93; }

/* Boîte */
.badge-boite-auto{
    background-color:#fbf885;
    color:#000 !important;
    border-radius:.45rem;
    padding:.25rem .5rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}
.badge-boite-manuelle{
    background-color:#9cfb85;
    color:#000 !important;
    border-radius:.45rem;
    padding:.25rem .5rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}

/* Paiement */
.badge-paid{
    background:#28a745;
    color:#fff;
    padding:.25rem .5rem;
    border-radius:.45rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}
.badge-unpaid{
    background:#dc3545;
    color:#fff;
    padding:.25rem .5rem;
    border-radius:.45rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}

/* Totaux / neutres (gris clair) */
.badge-soft{
    background:#e9ecef;
    color:#212529;
    padding:.25rem .5rem;
    border-radius:.45rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}
.badge-soft-outline{
    background:#f8f9fa;
    border:1px solid rgba(0,0,0,.08);
    color:#212529;
    padding:.25rem .5rem;
    border-radius:.45rem;
    font-weight:700;
    font-size:.85rem;
    line-height:1.1;
    vertical-align:middle;
}

/* Thèmes moto */
.badge-moto{
    background-color:#343a40;
    color:#fff;
}

/* Bons cadeaux : solde */
.badge-bon-ok{
    background:#28a745;
    color:#fff;
}
.badge-bon-zero{
    background:#dc3545;
    color:#fff;
}


/* Par défaut : 1 ligne partout (mais pas en force absolue) */
.table-responsive .table td,
.table-responsive .table th{
    white-space: nowrap;
}

/* Exceptions : ces blocs doivent pouvoir revenir à la ligne */
.table-responsive .table td .table-wrap-normal{
    white-space: normal !important;
}

/* IMPORTANT : autoriser le wrap sur la cellule elle-même (pas juste le div) */
.table-responsive .table td.cell-wrap{
    white-space: normal !important;
}


/* 1 badge = 1 ligne */
.table-wrap-normal{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

/* Un thème (badge) doit rester sur UNE SEULE ligne */
.table-wrap-normal .badge-theme{
    white-space: nowrap !important;   /* interdit le retour à la ligne */
    display: inline-flex;             /* rendu propre */
    max-width: 100%;                  /* ne dépasse pas la cellule */
    overflow: hidden;                 /* coupe si trop long */
    text-overflow: ellipsis;          /* ... */
}




/* --- Popup légende (même style que les autres pages) --- */
.th-legend {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.legend-popover {
    position: relative;
    display: inline-block;
}

.legend-icon-btn {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.25);
    background: #fff;
    color: #495057;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.legend-icon-btn:hover {
    background: rgba(0,0,0,.03);
}

.legend-panel {
    position: absolute;
    top: 140%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);

    z-index: 9999;
    width: 360px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
    padding: .75rem .9rem;
    display: none;
    text-align: left;
}

.legend-panel.show { display: block; }
.legend-title { font-weight: 700; margin-bottom: .35rem; }
.legend-item { display:flex; gap:.6rem; align-items:flex-start; margin:.35rem 0; font-weight: 500; }
.legend-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: .35rem; flex: 0 0 10px; }
.legend-muted { color:#6c757d; font-size: .9rem; margin: 0; font-weight: 400; }

/* =========================
   READ pages (shared)
   ========================= */

.page-title {
    font-weight: 700;
    letter-spacing: .2px;
}

.page-subtitle {
    color: #6c757d;
    margin-top: .25rem;
}

.card-soft {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
}

.card-soft .card-header {
    background: rgba(0,0,0,.02);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.section-title {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}


/* tables read: comportement sûr */
.table td {
    vertical-align: top;
}

.hidden { display:none; }

.form-hint, .mini-help {
    color:#6c757d;
    font-size:.875rem;
}

.required-star, .req {
    color:#dc3545;
    font-weight:700;
    margin-left:.25rem;
}

.form-group label {
    font-weight:600;
    margin-bottom:.35rem;
}

.panel-soft{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    padding:12px;
    background:rgba(0,0,0,.015);
    margin-bottom:.25rem;
}

.panel-soft + .panel-soft{ margin-top:12px; }


/* =========================
   INDEX pages (shared)
   ========================= */

.btn-row{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    align-items:center;
}
.btn-row > .btn{ white-space:nowrap; }

.pager{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}
.pager .btn{ white-space:nowrap; }


/* Tables (list pages) */
.table td, .table th{
    vertical-align: top;
}
.table.align-middle td, .table.align-middle th{
    vertical-align: middle;
}


/* =========================
   TABLES - MODERNE (override Bootstrap)
   ========================= */

/* wrapper : carte propre + scroll horizontal + popover au-dessus */
.table-responsive{
    overflow-x: auto !important;
    overflow-y: visible !important; /* nécessaire pour ta popup */
    -webkit-overflow-scrolling: touch;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.5rem;
    box-shadow:0 .5rem 1.25rem rgba(0,0,0,.06);
    position:relative;
}

/* table pleine largeur, bordures propres */
.table{
    width:100%;
    border-collapse: separate;   /* plus clean avec wrapper arrondi */
    border-spacing: 0;
}

/* neutralise le gros cadre de table-bordered */
.table.table-bordered{
    border:0;
}

/* cellules : plus d’air + bordures douces */
.table th, .table td{
    padding:.75rem .9rem;
    font-size:.95rem;
    vertical-align: middle;
    border-color: rgba(0,0,0,.06) !important;
}

/* header moderne */
.table thead th{
    background: rgba(0,0,0,.03);
    font-weight:700;
    color:#212529;
    border-bottom:1px solid rgba(0,0,0,.08) !important;

    position: sticky;
    top: 0;
    z-index: 2;
}

/* striped discret */
.table.table-striped > tbody > tr:nth-of-type(odd) > *{
    background-color: rgba(0,0,0,.015) !important;
}

/* hover doux */
.table tbody tr:hover > *{
    background-color: rgba(143,203,255,.10) !important;
}

/* =========================
   TABLE MOBILE FIX (no squeeze + real horizontal scroll)
   ========================= */
@media (max-width: 576px){

    /* Le point clé : le tableau ne doit pas se compresser.
       Il doit pouvoir être plus large que l'écran => scroll */
    .table-responsive > .table{
        width: max-content;  /* empêche le shrink */
        min-width: 100%;     /* garde au moins la largeur du conteneur */
    }

    /* Badges : jamais de retour à la ligne dedans */
    .badge-theme,
    .badge-boite-auto,
    .badge-boite-manuelle,
    .badge-paid,
    .badge-unpaid{
        display: inline-block;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }
}


/* =========================
   ACTIONS en tableau (sans casser le style)
   ========================= */

/* Sécurise le comportement de cellule */
.table td.actions{
    display: table-cell !important;     /* annule tout flex accidentel */
    background-color: inherit !important;/* conserve le zebra */
    white-space: nowrap;                 /* évite "2 boutons puis 1" selon la place */
    vertical-align: middle;
    width: 60px;
}

/* Mise en forme des boutons */
.table td.actions .btn{
    display: inline-block;
    margin-right: .3rem;
    margin-bottom: 0;                    /* pas de saut étrange */
    white-space: nowrap;
}

/* pas de marge après le dernier bouton */
.table td.actions .btn:last-child{
    margin-right: 0;
}


#clicTable tbody tr.row-clickable { cursor: pointer; }
#clicTable tbody tr.row-clickable:hover td { background-color: rgba(0,0,0,0.035) !important; }


td.actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .55rem;
}

td.actions .btn i {
    font-size: 1rem;
    line-height: 1;
}

/* Le popover de légende doit pouvoir revenir à la ligne,
   même si le <th> est en nowrap */
.legend-panel,
.legend-panel *{
    white-space: normal !important;
}

/* Sécurise le retour à la ligne sur les longues phrases */
.legend-panel{
    overflow-wrap: anywhere;   /* ou "break-word" si tu préfères */
    word-break: normal;
}