/* ============================================================
   CONTEXT MENU — Sélection d’objectif spécifique
   (utilisé dans le module Activités)
   ============================================================ */

.os-context-menu .os-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  width: 100%;
  padding: 10px 12px;

  font-size: 15px;
  line-height: 1.5;
  text-align: left;

  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.os-context-menu .os-menu-code {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-bleu-900);
  white-space: nowrap;
  margin-top: 1px;
}


.os-context-menu .os-menu-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-texte-principal, #222);
}


.os-context-menu .os-menu-item:hover::after {
  opacity: 0.6;
}
.os-context-menu .os-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.os-context-menu .os-menu-item + .os-menu-item {
  margin-top: 2px;
}
.os-context-menu {
  background-color: #ffffff;
  border: 1px solid var(--c-gris-300);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 320px;
}
/* ============================================================
   CONTEXT MENU — Composant universel (V1)
   Contrat :
     - .context-menu = conteneur
     - .context-menu--submenu = variante sous-menu
     - .context-menu__item = item (button)
   Ponts compatibilité :
     - .os-context-menu = alias conteneur existant
     - .oa-submenu = alias sous-menu existant
     - .os-menu-item / .oa-menu-item = alias items existants
   ============================================================ */

/* ---------- Conteneur universel ---------- */
.context-menu,
.os-context-menu {
  background-color: #ffffff;
  border: 1px solid var(--c-gris-300);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 320px;
    /* 🆕 Scroll interne contrôlé */
  max-height: 320px; /* ≈ 8 items */
  overflow-y: auto;
  overscroll-behavior: contain;
    position: fixed;
  z-index: 9500;
}


/* ---------- Item universel ---------- */
.context-menu__item,
.context-menu .menu-item,
.os-context-menu .os-menu-item,
.oa-submenu .oa-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;

  font-size: 15px;
  line-height: 1.5;
  text-align: left;

  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Hover universel */
.context-menu__item:hover,
.context-menu .menu-item:hover,
.os-context-menu .os-menu-item:hover,
.oa-submenu .oa-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Espacement entre items */
.context-menu__item + .context-menu__item,
.context-menu .menu-item + .menu-item,
.os-context-menu .os-menu-item + .os-menu-item,
.oa-submenu .oa-menu-item + .oa-menu-item {
  margin-top: 2px;
}

/* =========================================================
   CONTEXT MENU — Icônes (version neutre Planif)
   ========================================================= */

.context-menu__item {
  gap: 10px; /* espace icône / texte */
}

/* ============================================================
   CONTEXT MENU — Liens (neutralise style navigateur)
   ============================================================ */

.context-menu__item {
  text-decoration: none;
  color: var(--c-texte);
}

.context-menu__item:visited {
  color: var(--c-texte);
}

.context-menu__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  color: var(--c-texte-muted); /* gris cohérent Design System */
  opacity: 0.9;
}

/* Légère accentuation au hover */
.context-menu__item:hover .context-menu__icon {
  color: var(--c-texte-principal);
}


/* ---------- Label informatif (non interactif) ---------- */
.context-menu__label {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-texte-principal);
  cursor: default;
  pointer-events: none;
}
/* ---------- Ajustements spécifiques OA (niveau 2) ---------- */
/* OA = texte simple : on force un rendu propre (wrap, align) */
.oa-submenu .oa-menu-item {
  align-items: flex-start;
  white-space: normal;
}
/* ============================================================
   CONTEXT MENU — Hiérarchie visuelle & séparateurs
   ============================================================ */

/* ---------- Séparateurs entre items ---------- */
.context-menu__item,
.os-context-menu .os-menu-item,
.oa-submenu .oa-menu-item {
  position: relative;
}

.context-menu__item:not(:last-child)::after,
.os-context-menu .os-menu-item:not(:last-child)::after,
.oa-submenu .oa-menu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;

  height: 1px;
  background: var(--c-border-subtle);
  opacity: 0.6;
}

/* ---------- NIVEAU 1 — OS ---------- */
.os-context-menu .os-menu-item {
  font-weight: 600;
}

/* Code OS légèrement accentué */
.os-context-menu .os-menu-code {
  color: var(--c-bleu-900);
}

/* ---------- NIVEAU 2 — OA ---------- */
.oa-submenu {
  /* léger retrait visuel */
  padding-left: 4px;
}

.oa-submenu .oa-menu-item {
  padding-left: 20px;        /* indentation claire */
  font-size: 14px;           /* légèrement plus petit */
  font-weight: 500;
  color: var(--c-texte-muted);
}

/* Hover plus discret pour OA */
.oa-submenu .oa-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.035);
}
/* ============================================================
   OS sans OA — état désactivé
   ============================================================ */

.os-context-menu .os-menu-item.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.os-context-menu .os-menu-item.is-disabled:hover {
  background-color: transparent;
}
/* Message informatif sous-menu OA */
.oa-menu-item.is-message {
  cursor: default;
  opacity: 0.7;
  white-space: normal;
  max-width: 280px;
}

/* ============================================================
   DROPDOWN — Composant universel (Foundation)
   Objectif :
     - Remplacer progressivement les <select>
     - Utiliser .context-menu comme moteur visuel
   ============================================================ */

/* ---------- Conteneur racine ---------- */
.dropdown {
  position: relative;
  display: inline-block;
  min-width: 180px;
}

/* ---------- Bouton déclencheur ---------- */
.dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  width: 100%;
  padding: 8px 12px;

  font-size: 14px;
  font-family: inherit;

  background: var(--c-surface-1);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);

  cursor: pointer;

  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}
/* ============================================================
   DROPDOWN — état disabled (lié au select natif)
   ============================================================ */

.dropdown-select__native:disabled + .dropdown__trigger {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown-select__native:disabled + .dropdown__trigger .dropdown__chevron {
  opacity: 0.4;
}

.dropdown__trigger:hover {
  background: var(--c-surface-hover);
}

.dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--c-primaire);
  box-shadow: 0 0 0 2px var(--c-focus-ring);
}

/* Chevron indicateur */
.dropdown__chevron {
  font-size: 12px;
  opacity: 0.6;
  transition: transform 150ms ease;
}

/* ---------- Menu ---------- */
.dropdown__menu {
position: fixed;
z-index: 9500; /* au-dessus du modal-content */
  z-index: 1000;

  display: none;

 min-width: 220px;
max-height: 350px;
overflow-y: auto;
}

/* État ouvert */
.dropdown--open .dropdown__menu {
  display: block;
}

/* Rotation chevron */
.dropdown--open .dropdown__chevron {
  transform: rotate(180deg);
}

/* Masquer le select natif mais conserver sa valeur */
.dropdown-select__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}


/* ============================================================
   CONTEXT MENU — Transition interne (niveau 1 → niveau 2)
   ============================================================ */



.os-context-menu.is-animating {
  pointer-events: none;
}

.os-context-menu.slide-out {
  animation: menuSlideOut 160ms ease forwards;
}

.os-context-menu.slide-in {
  animation: menuSlideIn 180ms ease forwards;
}

@keyframes menuSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   CONTEXT MENU — Mode navigation interne (niveau 2)
   ============================================================ */

.os-context-menu.is-level-2 .oa-menu-item {
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-texte-muted);
}

.os-context-menu.is-level-2 .oa-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.035);
}

/* ------------------------------------------------------------
   Niveau 2 — équivalent visuel de .oa-submenu
   ------------------------------------------------------------ */

.os-context-menu.is-level-2 {
  padding-left: 4px; /* même retrait que .oa-submenu */
}

.os-context-menu.is-level-2 .oa-menu-item {
  display: flex;
  align-items: flex-start;
  width: 100%;

  padding: 10px 12px 10px 20px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;

  background: transparent;
  border: none;
  border-radius: 4px;

  cursor: pointer;
  white-space: normal;

  color: var(--c-texte-muted);
}

.os-context-menu.is-level-2 .oa-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.035);
}


/* ------------------------------------------------------------
   Flèche navigation niveau 1 (OS)
   ------------------------------------------------------------ */

.os-context-menu .os-menu-item {
  justify-content: space-between;
}

.os-context-menu .os-menu-chevron {
  font-size: 14px;
  opacity: 0.5;
  transition: transform 120ms ease, opacity 120ms ease;
}

.os-context-menu .os-menu-item:hover .os-menu-chevron {
  opacity: 0.8;
  transform: translateX(2px);
}

.dropdown-badge-og {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;

  background: var(--c-bleu-500);
  color: var(--c-bleu-900);
}
.os-context-menu .os-menu-item[aria-disabled="true"],
.context-menu__item[aria-disabled="true"] {
  opacity: 0.4;
  font-style: italic;
  font-weight: 400; /* 🔥 override du bold */
  cursor: not-allowed;
  pointer-events: none;
}
.context-menu__item[disabled],
.context-menu__item[aria-disabled="true"] {
  opacity: 0.4;
  font-style: italic;
  font-weight: 400;
  cursor: not-allowed;
  pointer-events: none;
}