/* ======================================================================
    hm_topbar_history.css
   ====================================================================== */

/* contour + fond premium */
.hm-hist24{
  margin: 10px 12px 12px !important;
  padding: 10px 12px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
  background: linear-gradient(180deg, rgba(30,41,59,0.55), rgba(15,23,42,0.48)) !important;
  box-shadow: 0 18px 46px rgba(15,23,42,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(10px) !important;
}

/* top plus serré, mais premium */
.hm-hist24-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px !important; /* un peu plus tight */
}

/* titre en ligne + chip à droite */
.hm-hist24-title{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  color: rgba(226,232,240,0.92);
  line-height:1;
}

.hm-hist24-title-main{
  font-size:0.74rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hm-hist24-title-sep{
  opacity:0.35;
  font-size:0.74rem;
  transform:translateY(-0.5px);
}

.hm-hist24-title-sub{
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.06em;
  color: rgba(148,163,184,0.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* chip (heure) */
.hm-hist24-chip{
  margin-left:10px;
  flex:0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.35);
  color:#e5e7eb;
  font-weight:750;
  font-size:0.73rem;
  white-space:nowrap;
  max-width: min(360px, 42vw);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* track */
.hm-hist24-track{
  position:relative;
  height: 28px;
  display:flex;
  align-items:center;
}

/* rail visible + animation historique */
.hm-hist24-rail{
  position:absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.20);
  background:
    linear-gradient(180deg, rgba(2,6,23,0.55), rgba(15,23,42,0.35)),
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.00) 0px,
      rgba(148,163,184,0.00) 9px,
      rgba(148,163,184,0.24) 9px,
      rgba(148,163,184,0.24) 10px
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events:none;

  opacity:0.75;
  filter:saturate(0.95);
  transition: opacity .22s ease, filter .22s ease, transform .22s ease, box-shadow .22s ease;
}

#hmHist24Bar.is-hist-on .hm-hist24-rail{
  opacity:0.98;
  filter:saturate(1.12);
  transform: translateY(-50%) scaleY(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 4px rgba(59,130,246,0.08);
}

/* slider: ne casse pas ton style thumb existant */
.hm-hist24-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height: 28px;
  background: transparent;
  margin:0;
  padding:0;
}
.hm-hist24-slider:focus{ outline:none; }

/* =========================================================
   Bouton contextuel : Live vs Historique
   ========================================================= */

/* base premium */
.hm-hist24-live{
  appearance:none;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(30,41,59,0.26);
  color: rgba(226,232,240,0.92);
  border-radius: 12px;
  padding: 0.42rem 0.65rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.70rem;
  line-height:1;
  cursor:pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,0.38);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}

/* ÉTAT LIVE: vert "scan" */
#hmHist24Bar.is-live .hm-hist24-live{
  border-color: rgba(34,197,94,0.55);
  background: rgba(22,163,74,0.16);
  color: #bbf7d0;
  box-shadow: 0 12px 28px rgba(15,23,42,0.38), 0 0 0 4px rgba(34,197,94,0.10);
}

#hmHist24Bar.is-live .hm-hist24-live:hover{
  transform: translateY(-1px);
  background: rgba(22,163,74,0.22);
  border-color: rgba(34,197,94,0.70);
  box-shadow: 0 16px 34px rgba(15,23,42,0.55), 0 0 0 5px rgba(34,197,94,0.12);
}

/* ÉTAT HISTORIQUE: style "animation" bleuté */
#hmHist24Bar.is-hist-on .hm-hist24-live{
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.10);
  color: rgba(219,234,254,0.98);
  box-shadow: 0 12px 28px rgba(15,23,42,0.38), 0 0 0 4px rgba(59,130,246,0.12);
}

#hmHist24Bar.is-hist-on .hm-hist24-live:hover{
  transform: translateY(-1px);
  background: rgba(59,130,246,0.14);
  border-color: rgba(59,130,246,0.72);
  box-shadow: 0 16px 34px rgba(15,23,42,0.55), 0 0 0 5px rgba(59,130,246,0.14);
}

.hm-hist24-live:active{ transform: translateY(0px); }

/* mobile */
@media (max-width: 768px){
  .hm-hist24{ margin: 8px 10px 10px !important; padding: 10px 10px 12px !important; border-radius: 14px !important; }
  .hm-hist24-title-sub{ display:none; }
  .hm-hist24-chip{ max-width: 62vw; }
}

/* ======================================================================
   HISTORIQUE 24H — COMPACT MODE (2026 PRO)
   À coller tout en bas de hm_topbar_history.css
   Objectif: réduire la hauteur sans perdre le look premium
====================================================================== */

/* 1) Container: moins de padding vertical + marge plus tight */
.hm-hist24{
  margin: 6px 12px 8px !important;
  padding: 7px 12px 8px !important;
  border-radius: 16px !important;
}

/* 2) Top row: moins de hauteur consommée */
.hm-hist24-top{
  gap: 10px !important;
  margin-bottom: 6px !important;
}

/* 3) Titre: micro-compact (garde le côté “badge premium”) */
.hm-hist24-title{ line-height: 1 !important; }
.hm-hist24-title-main,
.hm-hist24-title-sep,
.hm-hist24-title-sub{
  font-size: 0.72rem !important;
}

/* 4) Chip: moins épais */
.hm-hist24-chip{
  padding: 4px 7px !important;
  font-size: 0.70rem !important;
}

/* 5) Track/slider: c’est LA grosse source de hauteur */
.hm-hist24-track{
  height: 22px !important;   /* avant: 28px */
}

.hm-hist24-slider{
  height: 22px !important;   /* avant: 28px */
}

/* 6) Rail: un peu plus fin (reste lisible et premium) */
.hm-hist24-rail{
  height: 8px !important;    /* avant: 10px */
}

/* 7) Thumb: plus petit + recentré */
.hm-hist24-slider::-webkit-slider-thumb{
  width: 18px !important;    /* avant: 22px */
  height: 18px !important;   /* avant: 22px */
  margin-top: 2px !important; /* ajuste le centrage sur rail */
  box-shadow: 0 10px 18px rgba(0,0,0,0.55), 0 0 0 5px rgba(59,130,246,0.10) !important;
}
.hm-hist24-slider::-moz-range-thumb{
  width: 18px !important;
  height: 18px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.55), 0 0 0 5px rgba(59,130,246,0.10) !important;
}

/* 8) Bouton live/hist: un peu moins haut */
.hm-hist24-live{
  padding: 0.38rem 0.58rem !important;
  font-size: 0.68rem !important;
  border-radius: 12px !important;
}

/* 9) Mobile: encore plus compact (sans étouffer le touch) */
@media (max-width: 768px){
  .hm-hist24{
    margin: 6px 10px 8px !important;
    padding: 7px 10px 8px !important;
    border-radius: 14px !important;
  }
  .hm-hist24-track{ height: 24px !important; } /* garde un peu de confort touch */
  .hm-hist24-slider{ height: 24px !important; }
  .hm-hist24-rail{ height: 8px !important; }
}