/* personas.css -- OCA Team Dashboard v2
   Styles for the persona tooltip portal and avatar states.
   The tooltip element (.persona-tooltip) is rendered into document.body via JS.
*/

/* ---------------------------------------------------------------------------
   Tooltip portal
   The JS in personas.js applies inline styles for position/color but these
   provide a sensible fallback and any class-level overrides.
   --------------------------------------------------------------------------- */
.persona-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  background: var(--tooltip-bg, #1a1a1a);
  color: var(--tooltip-fg, #fff);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Light mode tooltip colors */
[data-theme="light"] .persona-tooltip {
  --tooltip-bg: #1a1a1a;
  --tooltip-fg: #fff;
}

/* Dark mode tooltip colors */
[data-theme="dark"] .persona-tooltip {
  --tooltip-bg: #f0ece3;
  --tooltip-fg: #1a1f26;
}

/* ---------------------------------------------------------------------------
   Focus ring for keyboard navigation on interactive avatars
   --------------------------------------------------------------------------- */
[role="button"]:focus-visible {
  outline: 2px solid var(--teal, #17A398);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   Locked (T2 in T1 view) persona state -- applied via JS inline styles,
   but also available as a utility class for declarative use.
   --------------------------------------------------------------------------- */
.persona-avatar--locked {
  opacity: .55;
  filter: grayscale(60%);
}