/* /static/css/menu.css */

/* Barre menu type application */
#topMenu{
  margin: -12px -12px 10px -12px;
  position: sticky;
  top: 0;

  /* ✅ DOIT être au-dessus des tiles (15000) et panels (25000) */
  z-index: 300000;
}
/* ✅ Le menu + dropdowns doivent toujours passer au-dessus */
.appMenuBar{
  position: relative;
  z-index: 300000;
}

.menuDropdown{
  z-index: 300001;
}

.menuDropdown.submenu{
  z-index: 300002;
}

/* conteneur */
.appMenuBar{
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;

  background: var(--ia-menu-bg, #e9e9e9);
  color: var(--ia-menu-fg, #111);

  user-select: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ✅ IMPORTANT: ancre du dropdown top-level */
.menuItemWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ✅ PONT INVISIBLE : empêche le menu de se fermer quand tu descends */
.menuItemWrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px;   /* tu peux mettre 8-12 si besoin */
}

/* items top */
.menuItem{
  position: relative;
  height: 28px;
  padding: 0 10px;
  border: 0;

  /* ✅ onglets = “texte” (mêmes couleurs que la barre) */
  background: transparent;
  color: inherit;

  font: 13px/28px Arial, sans-serif;
  cursor: pointer;
  border-radius: 0;
}


/* hover : on garde ton style actuel */
.menuItem:hover{
 background: var(--ia-menu-hover-bg, rgba(0,0,0,0.06));
}

/* ✅ actif (réglable) */
.menuItem[aria-expanded="true"]{
  background: var(--ia-menu-hover-bg, rgba(0,0,0,0.06));
}

/* dropdown */
.menuDropdown{
  position: absolute;

  /* ✅ FIX GAP : aligné juste sous le bouton */
  top: calc(100% + 2px);   /* <-- au lieu de top:34px */
  left: 0;

  min-width: 220px;
  background: var(--ia-menu-dd-bg, #fff);
  color: var(--ia-menu-dd-fg, #111);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.20);
  padding: 6px;
  display: none;
}

/* ✅ ouvre uniquement le dropdown DIRECT du menu principal, pas les sous-menus */
.menuItemWrap.open > .menuDropdown{ display:block; }

.menuRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
}
.menuRow:hover{
  background: var(--ia-menu-hover-bg, rgba(0,0,0,0.06));
  color: var(--ia-menu-hover-fg, var(--ia-menu-dd-fg, #111));
}

.menuRow.disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
.menuSep{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 6px 2px;
}

/* raccourcis à droite */
.menuHint{
  color:#666;
  font-size: 12px;
}

/* boutons à droite (ex: "Compte") */
.menuPill{
  height: 26px;
  padding: 0 10px;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.04);
  color: #111;
  cursor:pointer;
  font-size: 12px;
}
.menuPill:hover{ background: rgba(0,0,0,0.08); }

/* =========================
   Sous-menus (niveau 2)
   ========================= */

/* chevron ▶ à droite */
.menuChevron{
  margin-left: auto;
  color:#666;
  font-size: 12px;
  cursor: pointer;
  padding-left: 10px;
}

/* un item qui possède un sous-menu */
.menuRow.hasSub{
  position: relative;
}

/* le sous-menu (un dropdown dans un dropdown) */
.menuDropdown.submenu{
  top: -6px;
  left: calc(100% + 6px);
  min-width: 240px;
  display: none;
}

/* ✅ ouverture seulement si la row a la classe openSub */
.menuRow.hasSub.openSub > .menuDropdown.submenu{
  display: block;
}

/* évite le #f2f2f2 hardcodé */
.menuRow.hasSub:hover{
  background: var(--ia-menu-hover-bg, rgba(0,0,0,0.06));
  color: var(--ia-menu-hover-fg, var(--ia-menu-dd-fg, #111));
}

.menuRow:hover .menuChevron,
.menuRow.hasSub:hover .menuChevron{
  color: var(--ia-menu-hover-fg, var(--ia-menu-dd-fg, #111));
}

/* optionnel : améliore la zone de survol */
.menuDropdown{ z-index: 20000; }
.menuDropdown.submenu{ z-index: 20001; }

/* ✅ Sous-menu Langue scrollable */
.menuDropdown.submenu.langList{
  max-height: 320px;      /* ajuste (260–360 selon ton goût) */
  overflow-y: auto;
  overflow-x: hidden;
}

/* optionnel: scrollbar plus “clean” et plus fine */
.menuDropdown.submenu.langList{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.35) transparent;
}

.menuDropdown.submenu.langList::-webkit-scrollbar{
  width: 3px;            /* 👈 AVANT : 10px */
}

.menuDropdown.submenu.langList::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.35);
  border-radius: 0;
}

.menuDropdown.submenu.langList::-webkit-scrollbar-track{
  background: transparent;
}

/* =========================
   Controls dockés dans la barre menu
   ========================= */

.appMenuRight .appMenuControls{
  display:flex;
  align-items:center;
  gap:32px;          /* ✅ + d’espace entre les familles */
  flex-wrap:nowrap;  /* ✅ reste sur une ligne */
  margin-left: 50px;
}

/* groupe (famille) */
.appMenuGroup{
  display:flex;
  align-items:center;
  gap:10px;          /* espace interne famille */
  white-space: nowrap;
}

.appMenuAccountStats{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  min-width: 0;
}

.menuStatItem{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  color: var(--ia-menu-fg, #111);
}

.menuStatLabel{
  opacity: 0.86;
}

.menuStatValue{
  font-weight: 600;
  color: var(--ia-menu-fg, #111);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 0;
  border: none;
  background: rgba(255,255,255,0.55);
  line-height: 1.02;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.45),
    0 0 1px rgba(255,255,255,0.22);
  -webkit-text-stroke: 0.2px rgba(255,255,255,0.18);
}

.menuStatValue.menuStatPlain{
  min-height: 0;
  padding: 0;
  background: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.menuStatValue.is-pos{
  color: #0a6b2b;
}

.menuStatValue.is-neg{
  color: #9f1f1f;
}

.menuStatValue.is-flat{
  color: #0f172a;
}

.menuTradesTriple{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.menuTradesBundle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menuTradeWin{
  color: #0a6b2b;
}

.menuTradeNeutral{
  color: #0f172a;
}

.menuTradeLoss{
  color: #9f1f1f;
}

.menuTradeSep{
  opacity: 0.66;
}

.menuTradeDash{
  opacity: 0.72;
  margin: 0 1px 0 3px;
}

.menuTradeTotal{
  font-weight: 700;
  color: var(--ia-menu-fg, #111);
}

.menuTradeTotalPlain{
  font-weight: 700;
  color: var(--ia-menu-fg, #111);
}

/* séparateur vertical entre familles */
.appMenuSepV{
  width:1px;
  height:22px;
  background: var(--ia-menu-fg, #111);
  display:inline-block;
}

/* labels “Recherche”, “Refresh (ms)”, “Local :” */
.menuLbl{
  font-size:12px;
  color: var(--ia-menu-fg, #111);
}

/* petite icône (🧑‍💻) */
.menuIcon{
  display:inline-flex;
  width:12px;
  height:12px;
  line-height:0;
  color: var(--ia-menu-fg, #111);
  opacity:0.9;
}
.menuIcon svg{
  width:100%;
  height:100%;
  display:block;
}
.menuIcon svg *{
  fill: currentColor;
}

/* valeur horloge */
.menuClockVal{
  font-size:12px;
  color: var(--ia-menu-fg, #111);
  opacity:0.98;
}

/* taille uniforme des champs/boutons dans la barre */
.appMenuRight .appMenuControls input,
.appMenuRight .appMenuControls select,
.appMenuRight .appMenuControls button{
  height: 24px;
  font-size: 12px;
  line-height: 24px;
}

/* ✅ UNIQUEMENT les vrais boutons dockés ( + / NewTab / MTF ) */
.appMenuRight .appMenuControls button{
  background: var(--ia-menu-btn-bg, rgba(0,0,0,0.04));
  color: var(--ia-menu-btn-fg, var(--ia-menu-fg, #111));
  border: 1px solid rgba(0,0,0,0.15);
}

/* ✅ Sursaut (hover) sur les boutons dockés */
.appMenuRight .appMenuControls button{
  transition: transform 120ms ease;
}

.appMenuRight .appMenuControls button:hover{
  transform: translateY(-1px);
}

/* ✅ Même si disabled (Analyse MTF), on garde le sursaut */
.appMenuRight .appMenuControls button:disabled:hover{
  transform: translateY(-1px);
}

/* ✅ bouton grisé (Analyse MTF si disabled) */
.appMenuRight .appMenuControls button:disabled{
  background: var(--ia-menu-btn-bg, rgba(0,0,0,0.04));
  color: var(--ia-menu-btn-fg, #777);
  border-color: rgba(0,0,0,0.12);
}


/* inputs */
.appMenuRight .appMenuControls input{
  box-sizing: border-box;
}

/* boutons style propre */
.appMenuRight .appMenuControls button{
  padding: 0 10px;
}

/* ✅ Calendrier : icône plus grande, sans bordure, sans “cadre” */
#btn_calendar{
  height: 28px !important;
  width: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ia-menu-fg, #111);
  cursor: pointer;
  border-radius: 8px;
}
#btn_calendar svg{
  width: 17px;
  height: 17px;
  display: block;
}
#btn_calendar svg *{
  fill: currentColor;
}

#btn_calendar{
  transition: transform 120ms ease;
}

#btn_calendar:hover{
  background: transparent !important;
  transform: translateY(-1px);
}

/* ✅ Industry : meme logique que le calendrier */
#btn_industry{
  height: 28px !important;
  width: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ia-menu-fg, #111);
  cursor: pointer;
  border-radius: 8px;
  transition: transform 120ms ease;
}
#btn_industry svg{
  width: 18px;
  height: 18px;
  display: block;
  opacity: 1 !important;
}
#btn_industry svg *{
  fill: currentColor;
  fill-opacity: 1 !important;
  opacity: 1 !important;
}
#btn_industry{
  opacity: 1 !important;
}
#btn_industry:hover{
  background: transparent !important;
  transform: translateY(-1px);
}


/* ✅ MTF : on garde un bouton normal, mais un peu plus “respirant” */
#btn_mtf{
  padding: 0 12px !important;
}
#btn_mtf{
  background: var(--ia-menu-btn-bg, rgba(0,0,0,0.04)) !important;
  color: var(--ia-menu-btn-fg, var(--ia-menu-fg, #111)) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}
#btn_mtf:disabled{
  background: var(--ia-menu-btn-bg, rgba(0,0,0,0.04)) !important;
  color: var(--ia-menu-btn-fg, #777) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* Reglage pour plan de travail*/
:root{
  --ia-top-offset: 0px;
  --ia-bottom-offset: 0px;
}