/* ── Nexgle Navigation Loader Overlay ── */
/* Injected as a standalone runtime layer; never touches compiled webpack chunks */

#gg-nav-veil {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Use the app's veil colour if available, fall back to pure dark */
  background: rgb(var(--gg-veil-rgb, 8 8 10));
  pointer-events: none;
  opacity: 1;
  transition: opacity 220ms ease;
}

#gg-nav-veil.gg-nav-veil-out {
  opacity: 0;
}

/* Logo ring */
#gg-nav-veil .gnv-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid rgb(var(--gg-accent, 240 80 37) / 0.22);
  border-top-color: rgb(var(--gg-accent, 240 80 37));
  animation: gnv-spin 0.9s linear infinite;
  position: absolute;
}

/* Logo mark (img or monogram) */
#gg-nav-veil .gnv-mark-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gg-nav-veil .gnv-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
}

#gg-nav-veil .gnv-monogram {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgb(var(--gg-accent, 240 80 37));
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1;
  user-select: none;
}

/* Site name */
#gg-nav-veil .gnv-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(var(--gg-text-rgb, 255 255 255) / 0.55);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0.01em;
  user-select: none;
}

/* Counter */
#gg-nav-veil .gnv-pct {
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--gg-text-rgb, 255 255 255) / 0.3);
  font-family: "Plus Jakarta Sans", ui-monospace, monospace;
  letter-spacing: 0.06em;
  user-select: none;
  min-width: 36px;
  text-align: center;
}

@keyframes gnv-spin {
  to { transform: rotate(360deg); }
}

/* Light mode override — veil-rgb is set per theme via CSS var */
html:not(.dark) #gg-nav-veil {
  background: rgb(var(--gg-veil-rgb, 245 245 247));
}

html:not(.dark) #gg-nav-veil .gnv-name {
  color: rgba(0 0 0 / 0.45);
}

html:not(.dark) #gg-nav-veil .gnv-pct {
  color: rgba(0 0 0 / 0.28);
}

/* Thin top progress bar (secondary indicator) */
#gg-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  z-index: 100000;
  background: rgb(var(--gg-accent, 240 80 37));
  width: 0%;
  transition: width 60ms linear, opacity 200ms ease;
  pointer-events: none;
}

/* ── Universal Dropdown, Select & Popover Visibility Guard ── */
html:not(.dark) select,
html:not(.dark) select option,
html:not(.dark) select optgroup,
html:not(.dark) .gg-app select option,
html:not(.dark) .gg-app.gg-app select option,
html:not(.dark) .gg-dc-suffix-select option,
html:not(.dark) .gg-ba-select option,
html:not(.dark) .gg-bd-fieldselect option {
  background-color: #FFFFFF !important;
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}

html:not(.dark) select option:checked,
html:not(.dark) select option:hover {
  background-color: #EDE9FE !important;
  color: #7C3AED !important;
  -webkit-text-fill-color: #7C3AED !important;
}

html.dark select,
html.dark select option,
html.dark select optgroup,
html.dark .gg-app select option,
html.dark .gg-app.gg-app select option,
html.dark .gg-dc-suffix-select option,
html.dark .gg-ba-select option,
html.dark .gg-bd-fieldselect option {
  background-color: #18181C !important;
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}

html.dark select option:checked,
html.dark select option:hover {
  background-color: #27272A !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Light Mode Popovers, Radix Menus & Topbar Currency Panel */
html:not(.dark) [data-radix-select-content],
html:not(.dark) [data-radix-popper-content-wrapper] [role="listbox"],
html:not(.dark) [data-radix-menu-content],
html:not(.dark) .gg-popover,
html:not(.dark) [role="listbox"],
html:not(.dark) [role="menu"],
html:not(.dark) .gg-topbar-cur-panel {
  background-color: #FFFFFF !important;
  color: #18181B !important;
  border: 1px solid #E4E4E7 !important;
}

html:not(.dark) [data-radix-select-content] [role="option"],
html:not(.dark) [data-radix-menu-content] [role="menuitem"],
html:not(.dark) [role="listbox"] [role="option"],
html:not(.dark) [role="menu"] [role="menuitem"],
html:not(.dark) .gg-popover-item,
html:not(.dark) .gg-topbar-cur-item {
  color: #18181B !important;
}

html:not(.dark) [data-radix-select-content] [role="option"]:hover,
html:not(.dark) [data-radix-select-content] [role="option"][data-highlighted],
html:not(.dark) [data-radix-menu-content] [role="menuitem"]:hover,
html:not(.dark) [data-radix-menu-content] [role="menuitem"][data-highlighted],
html:not(.dark) [role="listbox"] [role="option"]:hover,
html:not(.dark) [role="listbox"] [role="option"][data-highlighted],
html:not(.dark) .gg-popover-item:hover,
html:not(.dark) .gg-topbar-cur-item:hover {
  background-color: #F5F3FF !important;
  color: #7C3AED !important;
}

/* Dark Mode Popovers, Radix Menus & Topbar Currency Panel */
html.dark [data-radix-select-content],
html.dark [data-radix-popper-content-wrapper] [role="listbox"],
html.dark [data-radix-menu-content],
html.dark .gg-popover,
html.dark [role="listbox"],
html.dark [role="menu"],
html.dark .gg-topbar-cur-panel {
  background-color: #111114 !important;
  color: #FAFAFA !important;
  border: 1px solid #27272A !important;
}

html.dark [data-radix-select-content] [role="option"],
html.dark [data-radix-menu-content] [role="menuitem"],
html.dark [role="listbox"] [role="option"],
html.dark [role="menu"] [role="menuitem"],
html.dark .gg-popover-item,
html.dark .gg-topbar-cur-item {
  color: #FAFAFA !important;
}

html.dark [data-radix-select-content] [role="option"]:hover,
html.dark [data-radix-select-content] [role="option"][data-highlighted],
html.dark [data-radix-menu-content] [role="menuitem"]:hover,
html.dark [data-radix-menu-content] [role="menuitem"][data-highlighted],
html.dark [role="listbox"] [role="option"]:hover,
html.dark [role="listbox"] [role="option"][data-highlighted],
html.dark .gg-popover-item:hover,
html.dark .gg-topbar-cur-item:hover {
  background-color: #27272A !important;
  color: #FFFFFF !important;
}