/* SafeNod — Profile Dropdown v4 */

.snpd-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Avatar button */
.snpd-avatar-btn {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.snpd-avatar-btn:hover { border-color: rgba(255,255,255,0.7); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.snpd-avatar-btn[aria-expanded="true"] { border-color: rgba(255,255,255,0.85); }

.snpd-avatar-initials {
  font-size: 11.5px; font-weight: 700; color: #fff;
  line-height: 1; letter-spacing: 0.02em; user-select: none;
}

.snpd-online-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #36B37E; border: 2px solid var(--header-bg, #1247BA);
}

.snpd-panel {
  position: fixed;
  top: 56px; right: 16px;
  width: 272px;
  background: #fff;
  border: 1px solid #DFE1E6;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(9,30,66,0.22), 0 2px 8px rgba(9,30,66,0.10);
  z-index: 999999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.snpd-panel.snpd-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Panel header */
.snpd-ph {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  background: #F4F5F7;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #DFE1E6;
}
.snpd-ph-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1247BA; color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.snpd-ph-info { flex: 1; min-width: 0; }
.snpd-ph-name  { font-size: 13px; font-weight: 700; color: #05122E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snpd-ph-role  { font-size: 11px; color: #1247BA; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snpd-ph-plant { font-size: 11px; color: #5E6C84; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.snpd-role-badge {
  display: inline-block; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(18, 71, 186,0.10); color: #1247BA;
}

/* Divider */
.snpd-div { height: 1px; background: #DFE1E6; }

/* Items */
.snpd-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px 9px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.snpd-item:hover { background: #EBECF0; }
.snpd-item:last-child { border-radius: 0 0 8px 8px; }

.snpd-icon {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.snpd-icon-blue  { background: rgba(18, 71, 186,0.10);  color: #1247BA; }
.snpd-icon-slate { background: #EBECF0;               color: #5E6C84; }
.snpd-icon-amber { background: rgba(255,171,0,0.12);  color: #974F00; }
.snpd-icon-red   { background: rgba(222,53,11,0.10);  color: #DE350B; }
.snpd-icon-teal  { background: rgba(0,168,132,0.12);  color: #006B55; }

/* Language badge pill */
.snpd-lang-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 20px;
  background: #1247BA; color: #fff;
  flex-shrink: 0; margin-right: 4px;
}

/* Language chevron rotation — base points LEFT (toward flyout direction);
   when open, no rotation needed since the flyout opens to the same side. */
.snpd-lang-chevron { transition: transform 0.2s ease, opacity 0.2s ease; flex-shrink: 0; opacity: 0.5; }
.snpd-lang-chevron.open { opacity: 1; transform: scale(1.1); }

/* Language sub-panel — flyout to the LEFT of the parent dropdown so a long
   language list doesn't push everything below the viewport.

   The parent panel is .snpd-panel (width 272px, fixed). This flyout is
   absolutely positioned relative to it: right:100% pins its right edge to
   the parent's left edge, with an 8px gap. A max-height + overflow:auto
   means even 30 languages stay scrollable inside the flyout. */
.snpd-lang-sub {
  display: none;
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  width: 220px;
  max-height: 360px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #DFE1E6;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 8px 40px rgba(9,30,66,0.22), 0 2px 8px rgba(9,30,66,0.10);
  z-index: 1; /* above .snpd-item rows but inside the panel stacking context */
}
.snpd-lang-sub.open { display: block; }

/* Anchor the flyout to the Language row itself, not the whole panel,
   so it aligns with that row regardless of how many items sit above it. */
.snpd-item-lang { position: relative; }
.snpd-item-lang .snpd-lang-sub {
  top: 50%;
  transform: translateY(-50%);
}

/* Small caret pointing from flyout back toward the parent row */
.snpd-lang-sub::after {
  content: '';
  position: absolute;
  top: 18px;
  right: -6px;
  width: 10px; height: 10px;
  background: #FFFFFF;
  border-right: 1px solid #DFE1E6;
  border-top: 1px solid #DFE1E6;
  transform: rotate(45deg);
}

/* Thin scrollbar so it doesn't dominate the flyout visually */
.snpd-lang-sub::-webkit-scrollbar { width: 6px; }
.snpd-lang-sub::-webkit-scrollbar-thumb { background: #C1C7D0; border-radius: 3px; }
.snpd-lang-sub::-webkit-scrollbar-thumb:hover { background: #A5ADBA; }

.snpd-lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.snpd-lang-opt:hover { background: #F4F5F7; }
.snpd-lang-flag { font-size: 16px; flex-shrink: 0; }
.snpd-lang-name { flex: 1; font-size: 13px; font-weight: 500; color: #05122E; }
.snpd-lang-en { font-weight: 400; color: #5E6C84; margin-left: 2px; font-size: 12px; }
.snpd-lang-check { flex-shrink: 0; opacity: 0; stroke: #1247BA; }
.snpd-lang-check.active { opacity: 1; }

/* Dark theme additions */
[data-theme="dark"] .snpd-icon-teal { background: rgba(0,168,132,0.18); color: #57D9A3; }
[data-theme="dark"] .snpd-lang-sub {
  background: #22294A;
  border-color: #09245D;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .snpd-lang-sub::after {
  background: #22294A;
  border-right-color: #09245D;
  border-top-color: #09245D;
}
[data-theme="dark"] .snpd-lang-opt:hover { background: #2A3455; }
[data-theme="dark"] .snpd-lang-name { color: #E5E9F5; }
[data-theme="dark"] .snpd-lang-en { color: #8A91AD; }
[data-theme="dark"] .snpd-lang-sub::-webkit-scrollbar-thumb { background: #09245D; }
[data-theme="dark"] .snpd-lang-sub::-webkit-scrollbar-thumb:hover { background: #5A6B95; }

.snpd-ib { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.snpd-il { font-size: 13px; font-weight: 600; color: #05122E; line-height: 1.3; }
.snpd-is { font-size: 11px; color: #5E6C84; line-height: 1.3; }

.snpd-arrow { flex-shrink: 0; opacity: 0; stroke: #5E6C84; transition: opacity 0.1s, transform 0.1s; }
.snpd-item:hover .snpd-arrow { opacity: 1; transform: translateX(2px); stroke: #1247BA; }

.snpd-danger .snpd-il { color: #DE350B; }
.snpd-danger .snpd-is { color: rgba(222,53,11,0.65); }
.snpd-danger:hover { background: rgba(222,53,11,0.06); }

/* Dark theme */
[data-theme="dark"] .snpd-panel { background: #22294A; border-color: #09245D; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
[data-theme="dark"] .snpd-ph   { background: #1A2038; border-bottom-color: #09245D; }
[data-theme="dark"] .snpd-div  { background: #09245D; }
[data-theme="dark"] .snpd-ph-name  { color: #fff; }
[data-theme="dark"] .snpd-ph-role  { color: #457AED; }
[data-theme="dark"] .snpd-ph-plant { color: #8C9DC0; }
[data-theme="dark"] .snpd-il   { color: #E5E9F5; }
[data-theme="dark"] .snpd-is   { color: #8C9DC0; }
[data-theme="dark"] .snpd-item:hover { background: #2A3455; }
[data-theme="dark"] .snpd-icon-slate { background: #2A3455; color: #8C9DC0; }