/* ==========================================================================
   LOCAIRCRAFT — Feuille de style unifiée
   --------------------------------------------------------------------------
   Objectif : homogénéiser TOUTES les pages (grilles, formulaires, listes).
   Un seul langage visuel pour tous les boutons, icônes, tableaux et en-têtes.
   ========================================================================== */

html, body {
    height: 100%;
}

body {
    background: #f4f6f9;
    color: #2c3e50;
    margin-top: 5rem;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: #2c3e50;
}

/* --------------------------------------------------------------------------
   NAVIGATION (navbar) — barre bleue + liens avec icônes + état actif
   -------------------------------------------------------------------------- */
.bg-steel {
    background: linear-gradient(90deg, #1f3a5f 0%, #2c5f8a 100%);
    box-shadow: 0 2px 12px rgba(15, 30, 55, .35);
}
/* Liens : espacement aéré, icône + texte alignés verticalement */
.site-header .navbar-nav .nav-link {
    color: #cbd5db;
    padding: .55rem .95rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px;
    transition: color .18s ease, background-color .18s ease;
    white-space: nowrap;
}
.site-header .navbar-nav .nav-link i {
    font-size: .95em;
    min-width: 18px;
    text-align: center;
    color: inherit;
}
/* Survol : fond légèrement plus clair + texte blanc */
.site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .10);
}
/* Élément actif : fond bleu vif + texte blanc (bien visible) */
.site-header .navbar-nav .nav-item.active > .nav-link {
    color: #ffffff !important;
    font-weight: 600;
    background-color: #2980b9 !important;
    box-shadow: inset 0 -3px 0 #fff;
}
/* Flèche du dropdown alignée */
.site-header .navbar-nav .dropdown-toggle .fa-chevron-down {
    font-size: .7em;
    margin-left: 2px;
}
/* Brand : logo + nom locaircraft */
.navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 1.25rem;
}
.navbar-brand i {
    font-size: 1.2em;
    color: #7fc1e8;
}
/* Menu déroulant : arrondi, ombre, séparation nette */
.navbar .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 30, 55, .25);
    margin-top: 8px;
    padding: .4rem;
    min-width: 180px;
}
.navbar .dropdown-item {
    border-radius: 7px;
    padding: .5rem .8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #2c3e50;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.navbar .dropdown-item:hover {
    background-color: #e8f2fa;
    color: #1f3a5f;
}
.navbar .dropdown-item i {
    width: 18px;
    text-align: center;
    color: #2980b9;
}
/* Logout : discrètement distinct, texte rosé au survol */
.site-header .navbar-nav .nav-link[href="/logout"]:hover {
    color: #ff9d9d;
    background-color: rgba(255, 100, 100, .12);
}

/* --------------------------------------------------------------------------
   EN-TÊTES DE PAGES (card-header) — identiques sur toutes les pages
   -------------------------------------------------------------------------- */
.card-header.info-color {
    background: linear-gradient(135deg, #1f3a5f 0%, #2c5f8a 100%);
    border-radius: 10px 10px 0 0;
    padding: 14px 20px;
    font-size: 18px;
    letter-spacing: .5px;
}
/* Conteneur "carte" qui englobe les grilles/formulaires */
main .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(31, 58, 95, .08);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   TABLEAUX (grilles) — police/typo homogène
   --------------------------------------------------------------------------
   Toutes les grilles partagent la même graisse et taille de cellule.
   Typographie : 12px (alignée sur l'en-tête), padding aéré, lignes lisibles.
   -------------------------------------------------------------------------- */
#GridListVol tr td,
#tableFacture tr td,
#GridHistoriqueVol tr td,
#GridListAvion tr td,
#GridListClient tr td {
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
    padding: 10px 12px;
    line-height: 1.45;
    border-color: #e2e8f0;
}

/* Verrouille sur une ligne les colonnes à valeurs COURTES (dates numériques,
   durées, montants, codes avion, action) pour éviter le wrapping qui tassait
   la grille ; les colonnes Pilote / Client / Remarque (noms longs) restent
   pliables et respirent. */
#GridListVol tr td:nth-child(1),   /* date */
#GridListVol tr td:nth-child(3),   /* origine */
#GridListVol tr td:nth-child(4),   /* destination */
#GridListVol tr td:nth-child(5),   /* durée */
#GridListVol tr td:nth-child(6),   /* montant */
#GridListVol tr td:nth-child(7),   /* montant */
#GridListVol tr td:nth-child(8),   /* type */
#GridListVol tr td:last-child,     /* action */
#tableFacture tr td:last-child,
#GridHistoriqueVol tr td:last-child,
#GridListAvion tr td:last-child {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SYSTEME DE BOUTONS UNIFIE
   --------------------------------------------------------------------------
   3 tailles sémantiques :
     - Boutons d'action DANS les grilles  -> 32x32 carrés arrondis
     - Boutons de formulaire (Submit)     -> pleine largeur, dégradé
     - Boutons secondaires (Ajouter, Vol->Fac) -> une ligne, cohérents
   3 couleurs sémantiques (DRZ) :
     - ROUGE  .btn-danger      -> supprimer / PDF danger
     - BLEU   .btn-primary     -> modifier / télécharger / info
     - VERT   .btn-success     -> valider / envoyer / positive
   -------------------------------------------------------------------------- */

/* --- (A) Boutons d'action dans les grilles : tous 32x32, arrondis --- */
#GridListVol .btn,
#tableFacture .btn,
#divGridVols .btn,
#GridHistoriqueVol .btn,
.table-remove .btn,
.table-edit .btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    border: none;
}
#GridListVol .btn:hover,
#tableFacture .btn:hover,
#divGridVols .btn:hover,
#GridHistoriqueVol .btn:hover,
.table-remove .btn:hover,
.table-edit .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
    filter: brightness(1.08);
}
#GridListVol .btn i,
#tableFacture .btn i,
#divGridVols .btn i,
#GridHistoriqueVol .btn i,
.table-remove .btn i,
.table-edit .btn i {
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

/* --- Couleurs cohérentes des boutons d'action --- */
/* ROUGE : bouton danger (supprimer) + PDF factures reste rouge (couleur du format PDF) */
#GridListVol .btn-danger,
#tableFacture .btn-danger,
#divGridVols .btn-danger,
.table-remove .btn-danger {
    background: #e74c3c;
}
/* BLEU : bouton info/modifier/télécharger */
#GridListVol .btn-primary,
#tableFacture .btn-primary,
#divGridVols .btn-primary,
.table-edit .btn-primary {
    background: #2980b9;
    border-color: #2980b9;
}
/* VERT : bouton envoi email (statut positif) */
#tableFacture .btn-dark-green,
#tableFacture .btn-success {
    background: #27ae60;
    border-color: #27ae60;
}

/* --- (B) Boutons de formulaire / primaires : pleine largeur, dégradé --- */
form .btn-info,
form button.btn-info,
input[type="submit"].btn,
.btn-info.btn-block {
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    background: linear-gradient(135deg, #1f3a5f 0%, #2980b9 100%);
    border: none;
    box-shadow: 0 3px 8px rgba(31, 58, 95, .3);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
form .btn-info:hover,
form button.btn-info:hover,
input[type="submit"].btn:hover,
.btn-info.btn-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(41, 128, 185, .35);
    filter: brightness(1.06);
}
form .btn-info:active,
form button.btn-info:active {
    transform: translateY(0);
}
/* Icônes dans les boutons de formulaire */
form .btn-info i,
form button.btn-info i,
input[type="submit"].btn i {
    font-size: 18px;
    vertical-align: -2px;
}

/* --- (C) Boutons secondaires à une ligne (Ajouter, Vol->Fac, filtres) --- */
/* 'Vol -> Fac' et 'Ajouter' : même langue, même taille, même arrondi */
#btnValidateAll,
#btnVolFac,
.btn-tool {
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
    transition: all .18s ease;
    border: none;
    color: #fff;
}
/* Valider tous les vols : même gabarit que Vol->Fac, en vert (sémantique
 * action positive/validation), cohérent avec #tableFacture .btn-success. */
#btnValidateAll {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}
/* Vol -> Fac : gabarit identique, en bleu dégradé. */
#btnVolFac {
    background: linear-gradient(135deg, #1f3a5f 0%, #2980b9 100%);
}
#btnValidateAll:hover,
#btnVolFac:hover,
.btn-tool:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(41, 128, 185, .35);
    filter: brightness(1.06);
}
#btnValidateAll i,
#btnVolFac i,
.btn-tool i {
    margin-right: 6px;
}

/* 'Ajouter' dans les listes Client/Avion : même langue mais en contour (secondaire) */
.btn-outline-default {
    border: 2px solid #1f3a5f;
    border-radius: 8px;
    color: #1f3a5f;
    font-weight: 600;
    padding: 7px 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: all .18s ease;
}
.btn-outline-default:hover {
    background: #1f3a5f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(31, 58, 95, .3);
}
.btn-outline-default i {
    margin-right: 6px;
    vertical-align: -1px;
}

/* --------------------------------------------------------------------------
   DIVERS
   -------------------------------------------------------------------------- */
#divFormVols {
    display: none;
}

/* Colonne détail "+" cliquable (grille factures)
   L'icône est désormais une icône FontAwesome (fas fa-plus) injectée dans la
   cellule (plus fiable qu'une image de fond : plus d'écrasement possible par
   les zébrures / survol, et cohérent avec le reste des icônes de l'app). */
td.details-control {
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: transform .15s ease;
}
td.details-control i.fa-plus,
td.details-control i.fa-minus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #27ae60;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(39, 174, 96, .3);
    transition: all .15s ease;
}
tr.shown td.details-control i.fa-plus,
tr.shown td.details-control i.fa-minus {
    background: #e74c3c;
}
td.details-control:hover i.fa-plus,
td.details-control:hover i.fa-minus {
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(39, 174, 96, .4);
}

/* Icône "étoile" / enveloppe email statut dans la grille factures */
#tableFacture .far.fa-paper-plane {
    color: #27ae60;
    font-size: 15px;
}

/* Page login : centrer et limiter la largeur de la carte */

/* ==========================================================================
   DESIGN UNIFIE DES GRILLES (DataTables)
   --------------------------------------------------------------------------
   Appliqué à toutes les grilles : factures, vols, historique, avions, clients.
   Même en-tête, mêmes zébrures, même survol, même pagination.
   ========================================================================== */

/* --- Conteneur global : carte ombrée autour de chaque grille --- */
#tableFacture_wrapper,
#GridListVol_wrapper,
#GridHistoriqueVol_wrapper,
#GridListAvion_wrapper,
#GridListClient_wrapper {
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(31, 58, 95, .06);
}

/* --- En-têtes de colonnes : bleu foncé dégradé, texte blanc, HAUTEUR garantie ---
   Le sélecteur inclut `table.dataTable` pour surcharger le padding vertical
   que Bootstrap (.75rem→0) et DataTables imposent sur les <th>. */
#tableFacture.dataTable thead th,
#GridListVol.dataTable thead th,
#GridHistoriqueVol.dataTable thead th,
#GridListAvion.dataTable thead th,
#GridListClient.dataTable thead th {
    background: linear-gradient(135deg, #1f3a5f 0%, #2c5f8a 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 12px 10px !important;
    border-bottom: none;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}
/* Colonnes de montants : alignées à droite (factures Total TTC, avions Tarif) */
#tableFacture thead th.text-right,
#GridListAvion thead th.text-right {
    text-align: right !important;
}

/* --- Correctif texte des en-têtes ---
   DataTables/MDB enferme le libellé des <th> dans un div .dataTables_sizing
   à height:0 + overflow:hidden (div de mesure de largeur). Résultat : tout
   fond appliqué au <th> s'affiche mais le TEXTE reste invisible.
   On force ce div à se déplier pour révéler le libellé en blanc sur le fond
   bleu, et on réserve la place des icônes de tri à droite. */
#tableFacture.dataTable thead th .dataTables_sizing,
#GridListVol.dataTable thead th .dataTables_sizing,
#GridHistoriqueVol.dataTable thead th .dataTables_sizing,
#GridListAvion.dataTable thead th .dataTables_sizing,
#GridListClient.dataTable thead th .dataTables_sizing {
    display: inline-block;
    height: auto !important;
    overflow: visible !important;
    color: #fff;
}
/* Laisse la place des icônes de tri : décalage du texte pour les colonnes
   triables (les icônes sont à droite, en position absolute). */
#tableFacture.dataTable thead th.sorting .dataTables_sizing,
#tableFacture.dataTable thead th.sorting_asc .dataTables_sizing,
#tableFacture.dataTable thead th.sorting_desc .dataTables_sizing,
#GridListVol.dataTable thead th.sorting .dataTables_sizing,
#GridListVol.dataTable thead th.sorting_asc .dataTables_sizing,
#GridListVol.dataTable thead th.sorting_desc .dataTables_sizing,
#GridHistoriqueVol.dataTable thead th.sorting .dataTables_sizing,
#GridHistoriqueVol.dataTable thead th.sorting_asc .dataTables_sizing,
#GridHistoriqueVol.dataTable thead th.sorting_desc .dataTables_sizing,
#GridListAvion.dataTable thead th.sorting .dataTables_sizing,
#GridListAvion.dataTable thead th.sorting_asc .dataTables_sizing,
#GridListAvion.dataTable thead th.sorting_desc .dataTables_sizing,
#GridListClient.dataTable thead th.sorting .dataTables_sizing,
#GridListClient.dataTable thead th.sorting_asc .dataTables_sizing,
#GridListClient.dataTable thead th.sorting_desc .dataTables_sizing {
    padding-right: 22px;
}
#GridListVol thead th,
#GridHistoriqueVol thead th {
    text-align: center;
}

/* --- Hauteur d'en-tête HOMOGÈNE ---
   Le bouton "Ajouter" logé dans le dernier <th> (clients/avions) gonfle la
   ligne d'en-tête (52px) alors que les grilles sans bouton (factures/vols/
   historique) font 43px. On compacte ce th + son bouton pour ramener tous les
   en-têtes à la même hauteur. */
#GridListClient thead th:last-child,
#GridListAvion thead th:last-child {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    vertical-align: middle !important;
    overflow: hidden;
}
#GridListClient thead th:last-child a.btn,
#GridListAvion thead th:last-child a.btn {
    padding: 2px 12px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    height: auto !important;
    max-height: 26px;
    display: inline-flex;
    align-items: center;
}
/* Toutes les autres cellules d'en-tête : hauteur de ligne stable */
#GridListClient thead th,
#GridListAvion thead th {
    white-space: nowrap;
    vertical-align: middle;
}

/* --- En-tête des grilles SANS défilement ---
   Le scroll (scrollY/scrollX) a été retiré : DataTables rend désormais une
   SEULE table, en-tête et données alignés nativement (plus de scrollHead/
   scrollBody). On assure quand même le fond bleu et le texte blanc. */
#tableFacture thead th,
#GridListVol thead th,
#GridHistoriqueVol thead th,
#GridListAvion thead th,
#GridListClient thead th {
    background: linear-gradient(135deg, #1f3a5f 0%, #2c5f8a 100%);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    padding: 12px 10px;
    border-bottom: none;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

/* --- Icône de tri sans chevauchement du texte ---
   Sur une colonne triable, DataTables place l'icône de tri en ::after (absolute,
   right:16px). Quand le libellé d'en-tête est long (ex. "TOTAL TTC" ou
   "IMMATRICULATION") ou que la colonne est étroite (Ori., Dest., Tarif,
   Référence), le texte vient se superposer à l'icône. On réserve l'espace de
   l'icône à droite sur TOUTES les colonnes triables (padding-right) en
   compensant un léger padding à gauche, pour que le libellé reste centré sans
   chevaucher la flèche. */
#tableFacture thead th.sorting,
#tableFacture thead th.sorting_asc,
#tableFacture thead th.sorting_desc,
#GridListVol thead th.sorting,
#GridListVol thead th.sorting_asc,
#GridListVol thead th.sorting_desc,
#GridHistoriqueVol thead th.sorting,
#GridHistoriqueVol thead th.sorting_asc,
#GridHistoriqueVol thead th.sorting_desc,
#GridListAvion thead th.sorting,
#GridListAvion thead th.sorting_asc,
#GridListAvion thead th.sorting_desc,
#GridListClient thead th.sorting,
#GridListClient thead th.sorting_asc,
#GridListClient thead th.sorting_desc {
    padding-right: 22px !important;
    padding-left: 4px !important;
    text-align: center !important;
}

/* --- Colonnes étroites de la grille des vols : donner de la place à l'icône ---
   Les colonnes Ori. (4e), Dest. (5e) et T.vol (9e) sont trop étroites pour
   faire tenir le libellé + l'icône de tri sans superposition. On leur impose
   une largeur minimale (90px) pour que le texte centré et la flèche soient
   bien séparés. NB : la colonne "Id" (colonne 0) est masquée par DataTables
   (visible:false) donc retirée du DOM — l'indexation nth-child compte les
   colonnes réellement affichées (Val. est le 1er th). */
#GridListVol thead th.sorting:nth-child(4),
#GridListVol thead th.sorting:nth-child(5),
#GridListVol thead th.sorting:nth-child(9) {
    min-width: 90px;
}

/* --- Suppression du DOUBLON D'EN-TÊTE (défense) ---
   Sans scroll il n'y a plus de scrollBody ; cette règle reste pour éviter
   tout doublon si un scroll venait à être réactivé. */
div.dataTables_scrollBody thead {
    display: none !important;
}
/* Icônes de tri de DataTables : en blanc pour rester visibles sur le fond foncé */
#tableFacture thead .sorting:after,
#tableFacture thead .sorting_asc:after,
#tableFacture thead .sorting_desc:after,
#GridListVol thead .sorting:after,
#GridListVol thead .sorting_asc:after,
#GridListVol thead .sorting_desc:after,
#GridHistoriqueVol thead .sorting:after,
#GridHistoriqueVol thead .sorting_asc:after,
#GridHistoriqueVol thead .sorting_desc:after,
#GridListAvion thead .sorting:after,
#GridListAvion thead .sorting_asc:after,
#GridListAvion thead .sorting_desc:after,
#GridListClient thead .sorting:after,
#GridListClient thead .sorting_asc:after,
#GridListClient thead .sorting_desc:after {
    color: rgba(255, 255, 255, .8);
    opacity: 1;
}

/* --- Corps : zébrures douces, hover, hauteur de ligne confortable --- */
#tableFacture tbody tr,
#GridListVol tbody tr,
#GridHistoriqueVol tbody tr,
#GridListAvion tbody tr,
#GridListClient tbody tr {
    transition: background .12s ease;
}
/* Zébrure des lignes paires, EN EXCLUANT la cellule "détail" (icône +) qui
   porte son propre fond-image : sinon l'image du bouton détail serait masquée
   une ligne sur deux. */
#tableFacture tbody tr:nth-child(even) td:not(.details-control),
#GridListVol tbody tr:nth-child(even) td:not(.details-control),
#GridHistoriqueVol tbody tr:nth-child(even) td:not(.details-control),
#GridListAvion tbody tr:nth-child(even) td:not(.details-control),
#GridListClient tbody tr:nth-child(even) td:not(.details-control) {
    background: #f7fafc;
}
#tableFacture tbody tr:hover td,
#GridListVol tbody tr:hover td,
#GridHistoriqueVol tbody tr:hover td,
#GridListAvion tbody tr:hover td,
#GridListClient tbody tr:hover td {
    background: #eef4fb;
}
#tableFacture tbody td,
#GridListVol tbody td,
#GridHistoriqueVol tbody td,
#GridListAvion tbody td,
#GridListClient tbody td {
    padding: 10px 10px;
    border-top: 1px solid #eef2f6;
    vertical-align: middle;
}

/* --- Bordures externes fines autour du tableau --- */
#tableFacture,
#GridListVol,
#GridHistoriqueVol,
#GridListAvion,
#GridListClient {
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    overflow: hidden;
}

/* --- Largeur de la grille des vols : remplit son conteneur sans déborder ---
   La table s'étire exactement à la largeur de #divGridVols quel que soit le
   contenu ; les cellules coupées (retour à la ligne) sur Pilote / Rem. /
   Client évitent que la colonne Action sorte du cadre. */
#GridListVol {
    width: 100% !important;
    table-layout: fixed;
}
/* Colonnes à contenu long : le retour à la ligne propre évite d'étirer la table
   (au lieu de forcer nowrap qui ferait déborder le texte hors de la cellule). */
#GridListVol td:nth-child(3),
#GridListVol td:nth-child(10),
#GridListVol td:nth-child(11) {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}
#GridListVol th:nth-child(3),
#GridListVol th:nth-child(10),
#GridListVol th:nth-child(11) {
    overflow: hidden;
    text-overflow: ellipsis;
}    

/* --- Pagination : cohérente avec la palette bleue --- */
/* Les boutons sont des li.paginate_button.page-item > a.page-link ;
   la page active est li.active > a.page-link */
#tableFacture_wrapper .dataTables_paginate .page-link,
#GridListVol_wrapper .dataTables_paginate .page-link,
#GridHistoriqueVol_wrapper .dataTables_paginate .page-link,
#GridListAvion_wrapper .dataTables_paginate .page-link,
#GridListClient_wrapper .dataTables_paginate .page-link {
    border-radius: 6px;
    margin: 0 2px;
    padding: 5px 11px;
    border: 1px solid #d3dae2;
    color: #33475b;
    transition: all .15s ease;
    box-shadow: none;
}
#tableFacture_wrapper .dataTables_paginate li.active > .page-link,
#GridListVol_wrapper .dataTables_paginate li.active > .page-link,
#GridHistoriqueVol_wrapper .dataTables_paginate li.active > .page-link,
#GridListAvion_wrapper .dataTables_paginate li.active > .page-link,
#GridListClient_wrapper .dataTables_paginate li.active > .page-link {
    background: #1f3a5f;
    border-color: #1f3a5f;
    color: #fff !important;
}
#tableFacture_wrapper .dataTables_paginate .page-link:hover,
#GridListVol_wrapper .dataTables_paginate .page-link:hover,
#GridHistoriqueVol_wrapper .dataTables_paginate .page-link:hover,
#GridListAvion_wrapper .dataTables_paginate .page-link:hover,
#GridListClient_wrapper .dataTables_paginate .page-link:hover {
    background: #2c5f8a;
    border-color: #2c5f8a;
    color: #fff !important;
}
/* Boutons pagination désactivés (Précédent, …) : plus sobres */
#tableFacture_wrapper .dataTables_paginate .disabled > .page-link,
#GridListVol_wrapper .dataTables_paginate .disabled > .page-link,
#GridHistoriqueVol_wrapper .dataTables_paginate .disabled > .page-link,
#GridListAvion_wrapper .dataTables_paginate .disabled > .page-link,
#GridListClient_wrapper .dataTables_paginate .disabled > .page-link {
    color: #b3bfcc;
    background: #f4f6f9;
}

/* --- Barre recherche + select "Afficher X éléments" --- */
#tableFacture_wrapper .dataTables_filter input,
#GridListVol_wrapper .dataTables_filter input,
#GridHistoriqueVol_wrapper .dataTables_filter input,
#GridListAvion_wrapper .dataTables_filter input,
#GridListClient_wrapper .dataTables_filter input {
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
}
#tableFacture_wrapper .dataTables_filter input:focus,
#GridListVol_wrapper .dataTables_filter input:focus,
#GridHistoriqueVol_wrapper .dataTables_filter input:focus,
#GridListAvion_wrapper .dataTables_filter input:focus,
#GridListClient_wrapper .dataTables_filter input:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41, 128, 185, .15);
}
#tableFacture_wrapper .dataTables_length select,
#GridListVol_wrapper .dataTables_length select,
#GridHistoriqueVol_wrapper .dataTables_length select,
#GridListAvion_wrapper .dataTables_length select,
#GridListClient_wrapper .dataTables_length select {
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 4px 6px;
}
#tableFacture_wrapper .dataTables_info,
#GridListVol_wrapper .dataTables_info,
#GridHistoriqueVol_wrapper .dataTables_info,
#GridListAvion_wrapper .dataTables_info,
#GridListClient_wrapper .dataTables_info {
    color: #6b7a8c;
    font-size: 12px;
    padding-top: 14px;
}

/* Suppression des bordures doubles de Bootstrap (table-bordered) sur les en-têtes */
#tableFacture thead th:not(:last-child),
#GridListVol thead th:not(:last-child),
#GridHistoriqueVol thead th:not(:last-child),
#GridListAvion thead th:not(:last-child),
#GridListClient thead th:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, .15);
}

/* ==========================================================================
   FORMULAIRES — champs homogènes sur toutes les pages
   --------------------------------------------------------------------------
   Un même langage visuel pour tous les inputs/selects/textarea et leurs
   labels. On neutralise les fonds colorés ad hoc (ex. #00FFFF) laissés dans
   les templates pour revenir à un fond blanc propre et uniforme, et on
   standardise bordure / arrondi / focus.
   ========================================================================== */

/* Champs : fond blanc, bordure fine, arrondi cohérent avec les boutons */
form .form-control,
.form-group .form-control {
    background-color: #fff !important;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 400;
    height: auto;
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
form .form-control:hover,
.form-group .form-control:hover {
    border-color: #a8b8c8;
}
form .form-control:focus,
.form-group .form-control:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41, 128, 185, .12);
}

/* Labels : même style partout */
form .form-control-label,
.form-group .form-control-label {
    color: #1f3a5f;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    margin-bottom: 4px;
    display: block;
    white-space: nowrap;
}

/* Textearea (remarque / adresse) : garder la hauteur, bords homogènes */
form .md-textarea,
.form-group .md-textarea {
    border-radius: 8px;
    padding: 9px 12px;
    resize: vertical;
}

/* Case à cocher + son label sur la même ligne */
form .form-check,
.form-group input[type="checkbox"] {
    vertical-align: middle;
}

/* ---- Grille de formulaire : agencement fluide aligné ---- */
/* Chaque "colonne" de champ : largeur proportionnelle et marges régulières */
.cf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 16px;
    margin-bottom: 4px;
}
/* Variante : deux champs écartés (le premier collé à gauche, le second à droite)
   — reproduit la maquette du formulaire client (Nom … Société). */
.cf-row-between {
    justify-content: space-between;
}
.cf-field {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.cf-field.w-100 { width: 100%; }
.cf-field.w-80  { width: 80%; }
.cf-field.w-70  { width: 70%; }
.cf-field.w-60  { width: 60%; }
.cf-field.w-50  { width: 50%; }
.cf-field.w-48  { width: 48%; }
.cf-field.w-45  { width: 45%; }
.cf-field.w-40  { width: 40%; }
.cf-field.w-35  { width: 35%; }
.cf-field.w-33  { width: 33.33%; }
.cf-field.w-30  { width: 30%; }
.cf-field.w-28  { width: 28%; }
.cf-field.w-27  { width: 27%; }
.cf-field.w-25  { width: 25%; }
.cf-field.w-20  { width: 20%; }
.cf-field.w-19  { width: 19%; }
.cf-field.w-15  { width: 15%; }
.cf-field.w-auto { width: auto; flex: 1 1 auto; min-width: 220px; }

/* Groupe de deux champs côte à côte (ex. Orig + Dest) : interligne centré */
.form-group + .form-group,
.cf-field + .cf-field {
    margin-left: 0;
}

/* ============================================================
   CASES À COCHER (checkboxes) — style bleu cohérent avec le site
   ============================================================ */
/* Input type checkbox : on masque l'apparence native pour la remplacer
   par une case arrondie stylisée (appearance:none + SVG coche via mask). */
input[type="checkbox"]:not(.slider),
.custom-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    border: 2px solid #b8c6d8;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
    position: relative;
    top: -1px;
    flex: 0 0 auto;
}
/* État coché : fond bleu + coche blanche */
input[type="checkbox"]:not(.slider):checked,
.custom-checkbox input[type="checkbox"]:checked {
    background-color: #2980b9;
    border-color: #2980b9;
}
input[type="checkbox"]:not(.slider):checked::before,
.custom-checkbox input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
/* Focus : halo bleu léger */
input[type="checkbox"]:not(.slider):focus-visible,
.custom-checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 128, 185, .25);
}
/* État désactivé (ex. case Validées dans le formulaire d'ajout) */
input[type="checkbox"]:not(.slider):disabled,
.custom-checkbox input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Libellé de case à cocher sur la même ligne que la case */
label[for],
.form-check-label,
.custom-control-label {
    vertical-align: middle;
    display: inline-block;
}
/* Filtres "En cours / Validées / All" de la liste des vols */
#divCheckBox .custom-control {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}
#divCheckBox label.custom-control-label {
    color: #1f3a5f;
    font-weight: 600;
    font-size: 13px;
}

/* ============================================================
   MENUS DÉROULANTS (selects) — style cohérent avec les inputs
   ============================================================ */
select.form-control-sm,
select.custom-select-sm,
select.form-control.form-control-sm {
    background-color: #fff;
    border: 1.5px solid #cbd5e0;
    border-radius: 8px;
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.5;
    padding: 7px 30px 7px 12px;
    cursor: pointer;
    min-height: 38px;
    transition: border-color .18s ease, box-shadow .18s ease;
    /* Flèche personnalisée (remplace celle du navigateur) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232c3e50' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.form-control-sm:focus,
select.custom-select-sm:focus,
select.form-control.form-control-sm:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41, 128, 185, .15);
    outline: none;
}
select.form-control-sm option,
select.custom-select-sm option {
    color: #2c3e50;
    background: #fff;
}

/* Exception : sélecteur de pagination DataTables — format compact,
   sans grande flèche (c'est un petit compteur numérique). */
div.dataTables_wrapper .dataTables_length select,
.dataTables_length select {
    background-image: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 20px 2px 8px !important;
    min-height: 30px !important;
    min-width: 60px !important;
    width: 60px !important;
    border-radius: 6px;
    font-size: 13px;
}

/* ============================================================
   NOTIFICATIONS UNIFIÉES (notifications.js)
   Toasts + boîte de confirmation — cohérents avec le design system.
   ============================================================ */

/* --- Toasts (fixés en haut à droite) --- */
#locair-notify-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.locair-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    border-left: 4px solid rgba(255, 255, 255, .6);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .25s ease, transform .25s ease;
}
.locair-toast.locair-toast-in {
    opacity: 1;
    transform: translateX(0);
}
.locair-toast.locair-toast-out {
    opacity: 0;
    transform: translateX(20px);
}
.locair-toast-icon {
    font-size: 18px;
    margin-top: 1px;
}
.locair-toast-msg {
    flex: 1;
    line-height: 1.35;
}
.locair-toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    padding: 0 0 0 6px;
}
.locair-toast-close:hover {
    opacity: 1;
}

/* Variantes de couleur */
.locair-toast-success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}
.locair-toast-error {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}
.locair-toast-info {
    background: linear-gradient(135deg, #1f3a5f 0%, #2980b9 100%);
}
.locair-toast-warning {
    background: linear-gradient(135deg, #d68910 0%, #f39c12 100%);
}

/* --- Boîte de confirmation moderne --- */
.locair-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 45, .55);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}
.locair-modal-backdrop.locair-modal-in {
    opacity: 1;
}
.locair-confirm {
    background: #fff;
    border-radius: 12px;
    width: 380px;
    max-width: 90vw;
    padding: 24px 22px 18px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    transform: scale(.95);
    transition: transform .2s ease;
}
.locair-modal-in .locair-confirm {
    transform: scale(1);
}
.locair-confirm-icon {
    font-size: 40px;
    color: #f39c12;
    margin-bottom: 10px;
}
.locair-confirm-msg {
    font-size: 15px;
    color: #2c3e50;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4;
}
.locair-confirm-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.locair-btn {
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .18s ease;
    letter-spacing: .3px;
}
.locair-btn-cancel {
    background: #ecf0f1;
    color: #2c3e50;
}
.locair-btn-cancel:hover {
    background: #dfe6e9;
}
.locair-btn-ok {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: #fff;
    box-shadow: 0 3px 8px rgba(39, 174, 96, .35);
}
.locair-btn-ok:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(39, 174, 96, .4);
}