/* HyperTrade Web — styles propres à l'application, par-dessus theme.css (le thème de TrackMyFund, renommé « ht »).
   N'écrire que des var(--ht-…) : tout doit marcher en clair ET en sombre. */

/* ── l'écran de connexion couvre la page tant que la session n'est pas ouverte ─────────────────── */
.ht-lock { position: fixed; inset: 0; z-index: 3000; overflow-y: auto; background: var(--ht-body-bg); }
.ht-lock.d-none { display: none !important; }
body.ht-locked { overflow: hidden; }

/* ── la marque : pastille dégradée + « Hyper » en encre, « Trade » en couleur d'accent ──────────── */
.ht-logo {
  width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: inline-grid; place-items: center; color: #fff; font-size: .95rem;
  flex: none; background: linear-gradient(135deg, var(--ht-primary), var(--ht-info));
  box-shadow: 0 .35rem .9rem rgba(var(--ht-primary-rgb), .35);
}
.ht-brand { font-family: var(--ht-font-sans-serif); font-weight: 700; letter-spacing: -.01em; color: var(--ht-heading-color); }
.ht-brand span { color: var(--ht-primary); }
.ht-brandlink { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.ht-brandlink .ht-brand { font-size: 1.05rem; }
.ht-ver { align-self: flex-end; margin-left: -.35rem; padding-bottom: .1rem; font-size: .62rem; font-weight: 600; color: var(--ht-gray-600); font-variant-numeric: tabular-nums; }   /* la version à côté du logo (v3.22) */

/* ── la barre du haut : marque à gauche, thème et compte à droite ──────────────────────────────── */
.navbar-top { padding-left: 1rem; padding-right: 1rem; }

/* ── le menu du compte, aux couleurs du thème (repris de .mq-usermenu) ─────────────────────────── */
.ht-usermenu {
  --ht-dropdown-bg: color-mix(in srgb, var(--ht-primary) 6%, var(--ht-dropdown-bg-global, var(--ht-body-bg)));
  background-color: var(--ht-dropdown-bg);
  border: 1px solid rgba(var(--ht-primary-rgb), .22);
  box-shadow: 0 .6rem 1.6rem rgba(var(--ht-primary-rgb), .12);
  padding-top: .35rem;
}
.ht-usermenu .dropdown-header { color: var(--ht-primary); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ht-usermenu .dropdown-divider { border-color: rgba(var(--ht-primary-rgb), .16); }
.ht-usermenu .dropdown-item:hover, .ht-usermenu .dropdown-item:focus { background-color: rgba(var(--ht-primary-rgb), .11); color: var(--ht-primary); }
.ht-usermenu .dropdown-item.text-danger:hover, .ht-usermenu .dropdown-item.text-danger:focus { background-color: rgba(var(--ht-danger-rgb), .1); color: var(--ht-danger); }
/* v1.90 : l'en-tête (initiale, nom, rôle), des icônes, l'état des réglages à droite, la suppression discrète en bas */
.ht-usermenu { min-width: 17rem; }
.ht-usermenu .dropdown-item { display: flex; align-items: center; gap: .55rem; font-size: .84rem; padding-top: .32rem; padding-bottom: .32rem; }
.ht-um-ic { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.ht-um-val { margin-left: auto; font-size: .7rem; color: var(--ht-success); font-weight: 600; }
.ht-um-val.off { color: var(--ht-gray-500); }
#nav-version.ht-um-val { color: var(--ht-gray-500); font-weight: 500; }
.ht-um-kbd { margin-left: auto; font-size: .62rem; padding: .05rem .3rem; border-radius: .25rem; background: rgba(var(--ht-primary-rgb), .12); color: var(--ht-primary); }
.ht-um-head { display: flex; align-items: center; gap: .65rem; padding: .35rem .9rem .5rem; }
.ht-um-av { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  color: #fff; background: linear-gradient(135deg, var(--ht-primary), color-mix(in srgb, var(--ht-primary) 55%, #000)); }
.ht-um-av.sm { width: 1.35rem; height: 1.35rem; font-size: .7rem; margin-right: .4rem; }
.ht-um-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; color: var(--ht-heading-color); }   /* le nom en hérite (le thème sombre force b { color: inherit }) */
.ht-um-who b { font-size: .92rem; color: var(--ht-heading-color); overflow: hidden; text-overflow: ellipsis; }
.ht-um-who small { font-size: .7rem; color: var(--ht-gray-600); }
.ht-userbtn { display: inline-flex; align-items: center; }
.ht-usermenu .ht-um-del { font-size: .74rem; color: var(--ht-gray-500); }
.ht-usermenu .ht-um-del:hover, .ht-usermenu .ht-um-del:focus { color: var(--ht-danger); background-color: rgba(var(--ht-danger-rgb), .08); }

/* ── le journal des modifications (repris de TrackMyFund) ──────────────────────────────────────── */
.htc-list { max-height: 64vh; overflow-y: auto; padding-right: .3rem; }
.htc-ver { margin-bottom: .9rem; border: 1px solid var(--ht-border-color); border-radius: .9rem; background: var(--ht-card-bg); }
.htc-ver > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; }
.htc-ver > summary::-webkit-details-marker { display: none; }
.htc-ver > summary::after { content: '▾'; margin-left: auto; color: var(--ht-gray-500); transition: transform .2s; }
.htc-ver:not([open]) > summary::after { transform: rotate(-90deg); }
.htc-v { font-size: 1.05rem; font-weight: 800; color: var(--ht-gray-900); }
.htc-date { font-size: .8rem; color: var(--ht-gray-600); }
.htc-n { font-size: .75rem; padding: .05rem .5rem; border-radius: 1rem; background: var(--ht-gray-100); color: var(--ht-gray-700); }
.htc-latest { font-size: .72rem; font-weight: 700; padding: .05rem .5rem; border-radius: 1rem; background: rgba(var(--ht-success-rgb), .15); color: var(--ht-success); }
.htc-item { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: .8rem; margin: 0 .9rem .9rem; padding: .75rem .9rem; border-radius: .7rem;
  background: var(--ht-gray-100); border-left: 3px solid var(--ht-info); }
.htc-item.k-new { border-left-color: var(--ht-success); }
.htc-item.k-fix { border-left-color: var(--ht-warning); }
.htc-tag { align-self: start; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 1rem; text-align: center; white-space: nowrap;
  background: rgba(var(--ht-info-rgb), .14); color: var(--ht-info); }
.k-new .htc-tag { background: rgba(var(--ht-success-rgb), .15); color: var(--ht-success); }
.k-fix .htc-tag { background: rgba(var(--ht-warning-rgb), .18); color: var(--ht-warning); }
.htc-title { font-weight: 700; color: var(--ht-gray-900); font-size: .92rem; margin-bottom: .25rem; }
.htc-body { font-size: .86rem; line-height: 1.65; color: var(--ht-gray-700); }
@media (max-width: 575.98px) { .htc-item { grid-template-columns: 1fr; gap: .4rem; } .htc-tag { justify-self: start; } }

/* ── le journal des modifications (v1.37) : par jour, chaque changement sur une ligne ── */
.htc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-bottom: .7rem; margin-bottom: .6rem; border-bottom: 1px solid var(--ht-border-color); }
.htc-tools .htc-q { flex: 1 1 14rem; max-width: 22rem; }
.htc-tools .htc-kinds small { opacity: .65; font-size: .68rem; }
.htc-stat { margin-left: auto; font-size: .74rem; color: var(--ht-gray-600); } .htc-stat b { color: var(--ht-info); }
#changelog-body .htc-list { max-height: 66vh; overflow-y: auto; padding-right: .3rem; }
.htc-day { margin-bottom: 1.1rem; }
.htc-dayh { position: sticky; top: 0; z-index: 1; margin: 0 0 .5rem; padding: .3rem 0; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ht-primary); background: var(--ht-emphasis-bg); border-bottom: 1px solid rgba(var(--ht-primary-rgb), .25); }
.htc-ver2 { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .2rem .8rem; padding: .45rem .5rem; border-radius: .6rem; }
.htc-ver2 + .htc-ver2 { border-top: 1px dashed var(--ht-border-color); border-radius: 0; }
.htc-ver2.fresh { background: rgba(var(--ht-info-rgb), .07); border-radius: .6rem; }
.htc-vh { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.htc-vh b { font-family: var(--ht-font-monospace); font-size: .92rem; color: var(--ht-gray-900); }
.htc-latest, .htc-fresh { font-size: .6rem; font-weight: 800; padding: .05rem .4rem; border-radius: 1rem; white-space: nowrap; }
.htc-latest { background: rgba(var(--ht-success-rgb), .15); color: var(--ht-success); }
.htc-fresh { background: rgba(var(--ht-info-rgb), .16); color: var(--ht-info); }
.htc-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.htc-items li { display: flex; gap: .5rem; align-items: baseline; padding: .2rem .35rem; border-radius: .4rem; cursor: pointer; font-size: .82rem; line-height: 1.5; color: var(--ht-gray-700); }
.htc-items li:hover { background: rgba(var(--ht-primary-rgb), .06); }
.htc-items li .ic { flex: none; width: 1.2rem; text-align: center; font-size: .8rem; }
.htc-items li .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htc-items li.open .tx { white-space: normal; }
.htc-items li .tx b { color: var(--ht-gray-900); font-weight: 700; }
.htc-items li.k-fix .tx b { color: var(--ht-warning); } .htc-items li.k-new .tx b { color: var(--ht-success); }
.htc-none { text-align: center; color: var(--ht-gray-500); padding: 2rem 0; }
/* v1.57 : des versions pas encore lues — un petit compteur dans le bouton de l'utilisateur (entre le nom et la flèche du menu,
   qui est le ::after de Bootstrap), et « 3 nouvelles » au bout de « Journal des modifications » ; aux couleurs du thème */
#nav-user { display: inline-flex; align-items: center; }
#nav-user::after { order: 2; }
#nav-user[data-new]::before { content: attr(data-new); order: 1; margin-left: .45rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 1rem;
  font-size: .62rem; font-weight: 800; line-height: calc(1.15rem - 2px); text-align: center;
  color: var(--ht-info); background: rgba(var(--ht-info-rgb), .16); border: 1px solid rgba(var(--ht-info-rgb), .55); }
#btn-changelog { display: flex; align-items: center; gap: .35rem; }
#btn-changelog[data-new]::after { content: attr(data-new); margin-left: auto; padding: .05rem .5rem; border-radius: 1rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .02em; color: var(--ht-info); background: rgba(var(--ht-info-rgb), .14); border: 1px solid rgba(var(--ht-info-rgb), .4); }
@media (max-width: 575.98px) { .htc-ver2 { grid-template-columns: 1fr; } .htc-vh { flex-direction: row; } }
/* v1.57 : Serveurs → Agents IBKR, une carte par agent (côte à côte quand il y a la place) */
.ht-ibagents { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 0 1rem; }
.ht-ibagents .ht-sumkv { grid-template-columns: auto 1fr; }
/* v1.76 : Serveurs → Sources de prix (Alpaca) */
.ht-srccard { max-width: 52rem; }
.ht-acctname { display: inline-flex; align-items: center; gap: .3rem; margin-right: .7rem; white-space: nowrap; }