/*body.loading {
    cursor: wait !important;
}*/

body.loading::before {
  content: "⏳ Chargement...";
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  background: #eee;
  color: #018FFA;
  padding: 8px 16px;
  border: 1px solid #ccc;
  z-index: 9999;
}

.container {
    max-width: 1200px;
    margin: 40px auto 40px;
    padding: 0 20px;
}


/* — TITRE DE PAGE — */
h1 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #234f8c;
}

.entete-liste {
    margin-top: 20px;
    display:flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 10px;
}

/* COMPTEUR DE LIGNES: affiche le nombre de supports disponibles */
.row-count {
    flex: 0 0 auto;
    align-content: center;
    font-size: 0.9rem;
    /*margin-bottom: 10px;*/
    color: #555;
    /*text-align: center;*/
}

/* — TABLEAU — */

/* TABLEAU — Style moderne et lisible */
#tickersTableId {
    display: none;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

#tickersTableId th,
#tickersTableId td {
    padding: 5px;/*12px 16px;*/
    text-align: left;
    font-size: 0.95rem;
    border-bottom: 1px solid #eaeaea;
}

#tickersTableId th {
    background-color: #f5f9ff;
    color: #003b7a;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

#tickersTableId tbody tr {
    transition: background-color 0.2s ease;
}

#tickersTableId tbody tr:hover {
    background-color: #f1f9ff;
}

#tickersTableId td input[type="number"] {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

#tickersTableId td input[type="number"]:focus {
    border-color: #018ffa;
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
}


/* ======== DRAPEAU DE DEVISES ======== */
.currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.flag-icon {
  display: inline-block;
  height: 14px;
  width: auto;
  /*margin-right: 2px;*/
}
/* ======== FIN DE DRAPEAU DE DEVISES ======== */


/* -------------------------------------------------------------------- */
/* ZONE AFFICHAGE DES FILTRES ACTIFS
/* -------------------------------------------------------------------- */

.active-filters {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.filter-badge {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-badge button.remove-filter {
  background: none;
  border: none;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 14px;
  /*font-weight: bold;*/
  cursor: pointer;
  color: #555;
}

.filter-badge button.remove-filter:hover {
  color: #c00;
}



/* -------------------------------------------------------------------- */
/* GESTION DES FILTRES                                                  */
/* -------------------------------------------------------------------- */
.filter-icon {
  cursor: pointer;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
}

.filter-icon svg {
  fill: #666;
  width: 14px;
  height: 14px;
  transition: fill 0.2s;
}

.filter-icon:hover svg {
  fill: #FEB019;
}

.filter-icon.active svg {
  fill: #FEB019;
}

/* Popup du champ de filtre */
.column-filter-popup {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100px;
}

.column-filter-popup input {
  width: 100%;
  padding: 3px;
  font-size: 0.85em;
  box-sizing: border-box;
}






/* — PAGINATION — */
.pagination {
    flex: 0 0 auto;
    /*margin-top: 15px;*/
    text-align: center;
}

.pagination-bottom {
    display: flex;
    justify-content: center;
    padding: 10px;
}


.pagination button {
    margin: 0 3px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pagination button:hover:not(.active) {
    background-color: #f0f0f0;
}

.pagination button.active {
    background-color: #018FFA;
    color: #fff;
    border-color: #018FFA;
}

#pagination-bottom {
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 0 0;
}

#searchInput {
    flex: 0 1 auto;
    /*width: 100%;*/
    min-width: 220px;
    font-size: 0.95rem;
    padding: 10px;
}


/* Capsule stylée pour ticker */
.capsule-ticker {
    display: inline-flex;
    background-color: #FEB019; /*#034A96;*/
    color: #fff;
    font-size: 0.7rem; /*0.85rem;*/
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 6px;
    align-items: center; 
    white-space: nowrap;
}

.blue-background {
    background-color: #018FFA;
}

/* Tri visuel sur entête */
#tickersTableId th.sorted-asc::after {
    content: " ▲";
    font-size: 0.7em;
}

#tickersTableId th.sorted-desc::after {
    content: " ▼";
    font-size: 0.7em;
}


.red {
    color: #b32424; /*red;*/
  }

.blue {
    color:  #018FFA; /*#234f8c; */
}



@media  screen and (max-width: 768px) {


    .container {
        max-width: 100%;
    }

    .not-on-mobile {
        display: none;
    }

    h1 {
        font-size: 1.4rem;
        text-align: center;
    }

    .entete-liste {
        flex-direction: column;
        gap: 10px;    
        align-items: center;
    }

    
    .pagination,
    #pagination-bottom {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pagination button {
        font-size: 0.9rem;
        margin: 5px 4px;
    }

    #tickersTableId th, #tickersTableId td {
        padding: 10px;
        font-size: 0.85rem;
    }

    .capsule-ticker {
        min-width: 50px;
        font-size: 0.8rem;
        padding: 4px 8px;
    }

}