/* ═══════════════════════════════════════════════════════════════════════════
   SOMA · soma-user-menu.css — estilo do COMPONENTE ÚNICO de menu de sessão
   ---------------------------------------------------------------------------
   Folha de estilo do window.SOMAUserMenu (soma-user-menu.js). Consolida o visual
   já usado nas três superfícies:
     • Landing  → soma-auth-header.js  (.sa-*)        — dropdown escuro
     • Plataforma → platform-nav.js    (.pl-user-dropdown*) — tema por variáveis
     • Backoffice → admin-usermenu.js  (.adm-user-dropdown*) — tema claro

   Aqui o componente vive sob o prefixo .sum-* (SOMA User Menu), totalmente
   escopado, para NÃO colidir com os três menus existentes (que NÃO são tocados
   nesta fase). Tudo é "opt-in": só estiliza markup que o componente cria.

   Tema: ESCURO por padrão (paridade com a landing). Para superfícies claras
   (config/plataforma/backoffice), o host marca [data-sum-variant="light"] e as
   variáveis abaixo trocam de valor — sem reescrever regra alguma.
   🔒 Aditivo, escopado e reversível. Não usa !important salvo no estado de logout
      (mantém a cor de risco mesmo sob :hover), espelhando o que a landing já faz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── tokens (tema escuro padrão) ─────────────────── */
.sum-menu {
  --sum-ava-from:   #02D4DC;
  --sum-ava-to:     #155779;
  --sum-ava-ink:    #04121f;

  --sum-panel-bg:   #0c1d31;
  --sum-panel-bd:   rgba(127, 231, 235, .22);
  --sum-panel-sh:   0 18px 48px rgba(2, 8, 18, .55);

  --sum-head-strong: #F5F9FC;
  --sum-head-soft:   rgba(245, 249, 252, .6);
  --sum-divider:     rgba(255, 255, 255, .08);

  --sum-id-strong:  inherit;
  --sum-id-soft:    .72;

  --sum-item-ink:   #dbe7f2;
  --sum-item-hover-bg: rgba(2, 184, 191, .12);
  --sum-item-hover-ink: #fff;
  --sum-item-focus-ring: rgba(127, 231, 235, .5);

  --sum-staff-ink:  #7FE7EB;
  --sum-staff-badge-bg: rgba(2, 184, 191, .16);
  --sum-staff-badge-bd: rgba(127, 231, 235, .4);

  --sum-logout-ink: #ffb4b4;
  --sum-logout-hover-bg: rgba(255, 90, 90, .14);
  --sum-logout-hover-ink: #ffd5d5;

  position: relative;
  display: inline-flex;
}

/* ─────────────────────── variante CLARA (config/plataforma/backoffice) ────── */
.sum-menu[data-sum-variant="light"] {
  --sum-panel-bg:   var(--pl-card, #fff);
  --sum-panel-bd:   var(--pl-border, rgba(15, 40, 60, .12));
  --sum-panel-sh:   var(--pl-shadow, 0 18px 48px rgba(15, 40, 60, .16));

  --sum-head-strong: var(--pl-text, #102a3c);
  --sum-head-soft:   var(--pl-text-3, #5c7184);
  --sum-divider:     var(--pl-border, rgba(15, 40, 60, .12));

  --sum-id-strong:  var(--pl-text, #102a3c);
  --sum-id-soft:    .65;

  --sum-item-ink:   var(--pl-text, #102a3c);
  --sum-item-hover-bg: var(--pl-bg-light, rgba(2, 184, 191, .08));
  --sum-item-hover-ink: var(--pl-text, #102a3c);
  --sum-item-focus-ring: rgba(2, 184, 191, .5);

  --sum-staff-ink:  #018a90;
  --sum-staff-badge-bg: rgba(2, 184, 191, .12);
  --sum-staff-badge-bd: rgba(2, 184, 191, .4);

  --sum-logout-ink: var(--pl-rose, #d34d5e);
  --sum-logout-hover-bg: rgba(211, 77, 94, .1);
  --sum-logout-hover-ink: var(--pl-rose, #c23a4b);
}

/* ─────────────────────────────── gatilho (chip do usuário) ───────────────── */
.sum-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}
.sum-ava {
  width: 27px; height: 27px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sum-ava-from), var(--sum-ava-to));
  color: var(--sum-ava-ink);
  font-weight: 700; font-size: 11px;
  flex: none;
}
.sum-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sum-id { display: inline-flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sum-id strong {
  font-size: 13px; color: var(--sum-id-strong);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sum-id span { font-size: 10px; opacity: var(--sum-id-soft); letter-spacing: .02em; }
.sum-caret { flex: none; opacity: .7; transition: transform .18s ease; }
.sum-menu.is-open .sum-caret { transform: rotate(180deg); }

/* ─────────────────────────────── painel (dropdown) ──────────────────────── */
.sum-dd {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 248px;
  z-index: 80;
  background: var(--sum-panel-bg);
  border: 1px solid var(--sum-panel-bd);
  border-radius: 14px;
  box-shadow: var(--sum-panel-sh);
  padding: 7px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.sum-menu.is-open .sum-dd { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sum-dd[hidden] { display: none; }

.sum-dd-head {
  padding: 9px 12px 10px;
  border-bottom: 1px solid var(--sum-divider);
  margin-bottom: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.sum-dd-head strong {
  color: var(--sum-head-strong);
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sum-dd-head span {
  color: var(--sum-head-soft);
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sum-dd-head span[hidden] { display: none; }

.sum-dd a,
.sum-dd button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 9px;
  background: transparent; border: 0; cursor: pointer;
  font: 500 13px Inter, system-ui, sans-serif;
  color: var(--sum-item-ink);
  text-decoration: none; text-align: left; line-height: 1.2;
}
.sum-dd a svg,
.sum-dd button svg { flex: none; opacity: .78; }
.sum-dd a:hover, .sum-dd a:focus-visible,
.sum-dd button:hover, .sum-dd button:focus-visible {
  background: var(--sum-item-hover-bg);
  color: var(--sum-item-hover-ink);
  outline: none;
}
.sum-dd a:focus-visible,
.sum-dd button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--sum-item-focus-ring);
}

.sum-dd-div { height: 1px; background: var(--sum-divider); margin: 6px 4px; }

/* ───────────────────── Área Administrativa (STAFF, fail-closed) ──────────── */
.sum-dd-staff[hidden] { display: none; }
.sum-dd-staff svg { color: var(--sum-staff-ink); }
.sum-staff-badge {
  margin-left: auto;
  font: 700 8.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .6px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--sum-staff-badge-bg);
  color: var(--sum-staff-ink);
  border: 1px solid var(--sum-staff-badge-bd);
}

/* ───────────────────────────────── sair ─────────────────────────────────── */
.sum-dd-logout { color: var(--sum-logout-ink); }
.sum-dd-logout svg { opacity: .85; }
.sum-dd-logout:hover,
.sum-dd-logout:focus-visible {
  background: var(--sum-logout-hover-bg) !important;
  color: var(--sum-logout-hover-ink) !important;
}

/* ─────────────────────────────── responsivo ─────────────────────────────── */
@media (max-width: 560px) {
  .sum-menu[data-sum-collapse-id] .sum-id { display: none; }
  .sum-dd { right: auto; left: 0; }
}