/* ================================================================
 * ProVsup Design System — pv-dropdown.css
 * Menus déroulants contextuels réutilisables.
 *
 * Icône chevron :
 *   .pv-icon-chevron        — icône SVG réutilisable, hérite currentColor
 *   .pv-icon-chevron--up    — rotation 180° (état ouvert)
 *
 * Dropdowns surface claire (Bootstrap .dropdown-menu) :
 *   .dropdown-menu--arrow-tl — flèche en haut à gauche
 *   .dropdown-menu--arrow-tr — flèche en haut à droite
 *
 * Menus sombres (barre de commande) — classe .pv-menu :
 *   .pv-menu               — conteneur principal
 *   .pv-menu-header        — en-tête optionnel (avatar + nom)
 *   .pv-menu-header-name   — nom dans l'en-tête
 *   .pv-menu-sep           — séparateur horizontal
 *   .pv-menu-item-danger   — classe sur <a> pour action destructive
 *   .pv-menu-version       — item version/meta centré et atténué
 *   .pv-menu--arrow-tr     — flèche en haut à droite (défaut end-aligned)
 *   .pv-menu--arrow-tl     — flèche en haut à gauche (défaut start-aligned)
 * ================================================================ */


/* ── Icône chevron réutilisable ─────────────────────────────────── */
/* Usage : <span class="pv-icon-chevron [pv-notif-caret|pv-param-tab-caret]">
 *           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
 *                fill="none" stroke="currentColor" stroke-width="2.5"
 *                stroke-linecap="round" stroke-linejoin="round"
 *                aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
 *         </span>
 */

.pv-theme .pv-icon-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.18s ease;
  vertical-align: middle;
}

.pv-theme .pv-icon-chevron svg {
  width: 12px;
  height: 12px;
  display: block;
}

.pv-theme .pv-icon-chevron--up {
  transform: rotate(180deg);
}


/* ── Dropdowns surface claire (Bootstrap .dropdown-menu) ─────────── */

@keyframes pv-dropdown-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}


/* ── Conteneur ──────────────────────────────────────────────────── */

.pv-theme .pv-menu {
  background: var(--cmd-bg);
  border: 1px solid oklch(1 0 0 / 0.10);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px oklch(0 0 0 / 0.40), 0 2px 8px oklch(0 0 0 / 0.20);
  padding: 6px;
  min-width: 200px;
  /* Toujours dans le DOM — visibilité pilotée par opacity + visibility */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease,
              transform 0.18s ease-out,
              visibility 0s linear 0.18s;
}

.pv-theme .pv-dropdown.open .pv-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease,
              transform 0.18s ease-out,
              visibility 0s linear 0s;
}


/* ── Flèche ─────────────────────────────────────────────────────── */

.pv-theme .pv-menu--arrow-tr::before,
.pv-theme .pv-menu--arrow-tl::before {
  content: '';
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  background: var(--cmd-bg);
  border-left: 1px solid oklch(1 0 0 / 0.10);
  border-top: 1px solid oklch(1 0 0 / 0.10);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

.pv-theme .pv-menu--arrow-tr::before { right: 18px; }
.pv-theme .pv-menu--arrow-tl::before { left: 18px; }


/* ── En-tête optionnel ──────────────────────────────────────────── */

.pv-theme .pv-menu-header {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  pointer-events: none;
}

.pv-theme .pv-menu-header img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  flex: none;
  box-shadow: 0 0 0 1.5px var(--cmd-bg), 0 0 0 2.5px oklch(1 0 0 / 0.22);
}

.pv-theme .pv-menu-header-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Séparateur ─────────────────────────────────────────────────── */

.pv-theme .pv-menu-sep {
  height: 1px;
  background: oklch(1 0 0 / 0.08);
  margin: 4px 0;
  padding: 0 !important;
  list-style: none;
}


/* ── Items ──────────────────────────────────────────────────────── */

.pv-theme .pv-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px !important;
  border-radius: var(--r-sm) !important;
  color: var(--cmd-fg) !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.13s, color 0.13s !important;
}

.pv-theme .pv-menu > li > a > i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex: none;
  opacity: 0.55;
  transition: opacity 0.13s;
}

.pv-theme .pv-menu > li > a:hover {
  background: oklch(1 0 0 / 0.08) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.pv-theme .pv-menu > li > a:hover > i {
  opacity: 1;
}


/* ── Item action destructive ────────────────────────────────────── */

.pv-theme .pv-menu > li > a.pv-menu-item-danger:hover {
  background: oklch(0.45 0.18 20 / 0.18) !important;
  color: oklch(0.88 0.08 20) !important;
}

.pv-theme .pv-menu > li > a.pv-menu-item-danger:hover > i {
  opacity: 1;
  color: oklch(0.75 0.15 20);
}


/* ── Item version / meta ────────────────────────────────────────── */

.pv-theme .pv-menu .pv-menu-version {
  justify-content: center !important;
  height: 26px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  color: oklch(1 0 0 / 0.25) !important;
}

.pv-theme .pv-menu .pv-menu-version:hover {
  background: transparent !important;
  color: oklch(1 0 0 / 0.50) !important;
}


/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — .pv-menu adapté au thème clair
   ════════════════════════════════════════════════════════════════ */

[data-theme="light"] .pv-theme .pv-menu {
  background: var(--elevated);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .pv-theme .pv-menu--arrow-tr::before,
[data-theme="light"] .pv-theme .pv-menu--arrow-tl::before {
  background: var(--elevated);
  border-color: var(--border);
}

[data-theme="light"] .pv-theme .pv-menu > li > a {
  color: var(--text) !important;
}

[data-theme="light"] .pv-theme .pv-menu > li > a > i {
  opacity: 0.45;
}

[data-theme="light"] .pv-theme .pv-menu > li > a:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

[data-theme="light"] .pv-theme .pv-menu > li > a:hover > i {
  opacity: 0.85;
}

[data-theme="light"] .pv-theme .pv-menu .pv-menu-item-danger:hover {
  background: var(--stop-soft) !important;
  color: var(--stop) !important;
}

[data-theme="light"] .pv-theme .pv-menu-sep {
  background: var(--border);
}

[data-theme="light"] .pv-theme .pv-menu-header img {
  box-shadow: 0 0 0 1.5px var(--elevated), 0 0 0 2.5px var(--border);
}

[data-theme="light"] .pv-theme .pv-menu-header-name {
  color: var(--text);
}

[data-theme="light"] .pv-theme .pv-menu .pv-menu-version {
  color: var(--muted) !important;
}

[data-theme="light"] .pv-theme .pv-menu .pv-menu-version:hover {
  color: var(--text-2) !important;
}


/* ════════════════════════════════════════════════════════════════
   MODIFICATEUR --dark — force le style sombre quel que soit le thème
   Usage : navbar (évènements, utilisateur) — toujours sur fond cmd-bar
   ════════════════════════════════════════════════════════════════ */

[data-theme="light"] .pv-theme .pv-menu--dark {
  background: var(--cmd-bg) !important;
  border-color: oklch(1 0 0 / 0.10) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark.pv-menu--arrow-tr::before,
[data-theme="light"] .pv-theme .pv-menu--dark.pv-menu--arrow-tl::before {
  background: var(--cmd-bg) !important;
  border-color: oklch(1 0 0 / 0.10) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark > li > a {
  color: var(--cmd-fg) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark > li > a > i {
  opacity: 0.55;
}

[data-theme="light"] .pv-theme .pv-menu--dark > li > a:hover {
  background: oklch(1 0 0 / 0.08) !important;
  color: #fff !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark > li > a:hover > i {
  opacity: 1;
}

[data-theme="light"] .pv-theme .pv-menu--dark .pv-menu-item-danger:hover {
  background: oklch(0.45 0.18 20 / 0.18) !important;
  color: oklch(0.88 0.08 20) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark .pv-menu-sep {
  background: oklch(1 0 0 / 0.08) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark .pv-menu-header img {
  box-shadow: 0 0 0 1.5px var(--cmd-bg), 0 0 0 2.5px oklch(1 0 0 / 0.22) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark .pv-menu-header-name {
  color: #fff !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark .pv-menu-version {
  color: oklch(1 0 0 / 0.25) !important;
}

[data-theme="light"] .pv-theme .pv-menu--dark .pv-menu-version:hover {
  color: oklch(1 0 0 / 0.50) !important;
}