/*
 * OceraOT — submenús azules globales
 * Se aplica a News, Account, Community, Forum, Library,
 * Char Bazaar y cualquier categoría futura.
 */

/* Fondo general de todas las ventanas desplegables del menú izquierdo. */
#MenuColumn .Submenu {
  background:
    linear-gradient(
      to bottom,
      rgba(5, 37, 57, .84),
      rgba(3, 25, 41, .78)
    ) !important;
  background-color: rgba(3, 31, 49, .82) !important;

  border-left: 1px solid rgba(35, 142, 184, .36) !important;
  border-right: 1px solid rgba(2, 14, 24, .72) !important;

  box-shadow:
    inset 1px 0 0 rgba(78, 187, 224, .08),
    inset -1px 0 0 rgba(0, 0, 0, .30) !important;
}

/* Cada opción del menú. */
#MenuColumn .Submenuitem {
  position: relative !important;
  background:
    linear-gradient(
      to right,
      rgba(4, 38, 57, .72),
      rgba(5, 48, 68, .64),
      rgba(3, 31, 48, .72)
    ) !important;
  background-color: rgba(4, 39, 58, .72) !important;

  transition:
    background-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}

/* Línea separadora azul en lugar de verde. */
#MenuColumn .SubmenuitemLabel {
  border-bottom: 1px solid rgba(45, 137, 169, .58) !important;
  color: #ffffff !important;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, .95),
    0 0 3px rgba(42, 171, 215, .10) !important;
  transition:
    color .16s ease,
    text-shadow .16s ease !important;
}

/* Iluminación al colocar el mouse sobre cualquier opción. */
#MenuColumn .Submenuitem:hover {
  background:
    linear-gradient(
      to right,
      rgba(7, 65, 91, .92),
      rgba(10, 91, 121, .88),
      rgba(5, 53, 77, .92)
    ) !important;
  background-color: rgba(8, 77, 105, .92) !important;

  box-shadow:
    inset 0 1px 0 rgba(101, 213, 247, .28),
    inset 0 -1px 0 rgba(0, 5, 10, .68),
    inset 0 0 10px rgba(25, 177, 224, .18),
    0 0 7px rgba(20, 170, 222, .20) !important;
}

/* Texto iluminado durante hover. */
#MenuColumn .Submenuitem:hover .SubmenuitemLabel {
  color: #ffffff !important;
  text-shadow:
    1px 1px 0 #000,
    0 0 5px rgba(72, 219, 255, .78),
    0 0 9px rgba(22, 171, 219, .42) !important;
}

/* La opción activa mantiene una luz azul moderada. */
#MenuColumn .Submenuitem:has(.ActiveSubmenuItemIcon[style*="visible"]) {
  background:
    linear-gradient(
      to right,
      rgba(7, 57, 82, .90),
      rgba(8, 74, 100, .84),
      rgba(4, 43, 64, .90)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(92, 204, 240, .20),
    inset 0 -1px 0 rgba(0, 5, 10, .62),
    inset 0 0 8px rgba(18, 157, 202, .15) !important;
}

/* En navegadores sin :has(), el icono activo conserva su señal visual. */
#MenuColumn .ActiveSubmenuItemIcon {
  filter:
    hue-rotate(130deg)
    saturate(1.45)
    brightness(1.18)
    drop-shadow(0 0 3px rgba(68, 218, 255, .75)) !important;
}

/* Mantener cadenas, marcos, títulos e iconos originales sin recolorearlos. */
#MenuColumn .LeftChain,
#MenuColumn .RightChain,
#MenuColumn .MenuButton,
#MenuColumn .Icon,
#MenuColumn .Label,
#MenuColumn .Extend {
  filter: none !important;
}