/*
 * Avira Digital custom CSS — linked from a single small <link> tag added to
 * backend-overrides/superset/templates/superset/spa.html, rather than
 * patching individual React/TSX component files. Preferred mechanism for
 * any future broad visual tweak: inspect the rendered class/id in the
 * browser, add a scoped rule here, no npm rebuild or large-file override
 * needed. See the ux-design skill.
 *
 * Every selector below is scoped under #main-menu (the app top nav bar's
 * stable id, confirmed in superset-frontend/src/features/home/Menu.tsx) —
 * do NOT write unscoped rules like `.ant-menu-item { ... }` here, AntD's
 * menu classes are reused all over the app (sidebars, dropdowns, table
 * menus) and an unscoped rule will silently break those elsewhere.
 */

/* theme-design/avira-design.md "App top nav bar" */
#main-menu {
  background: linear-gradient(90deg, #084857 0%, #16859F 100%) !important;
  border-bottom: 1px solid #A8B0BD !important;
}

/* Ant Design's <Menu> (horizontal mode) paints its own opaque background
   by default, independent of StyledHeader above — without this, it covers
   the gradient in exactly the strip where nav items live, and white text
   (below) lands on white-on-white until hover/selected changes the color. */
#main-menu .ant-menu,
#main-menu .ant-menu-horizontal,
#main-menu .ant-menu-item,
#main-menu .ant-menu-submenu,
#main-menu .ant-menu-submenu-title {
  background: transparent !important;
  background-color: transparent !important;
}

/* Nav items default to white so they show up against the dark gradient */
#main-menu .ant-menu,
#main-menu .ant-menu-item,
#main-menu .ant-menu-submenu-title,
#main-menu .ant-menu-title-content,
#main-menu .ant-menu-item .anticon,
#main-menu .ant-menu-submenu-title .anticon {
  color: #FFFFFF !important;
}

/* Hover/active/selected nav items switch to brand orange */
#main-menu .ant-menu-item:hover .ant-menu-title-content,
#main-menu .ant-menu-item-selected .ant-menu-title-content,
#main-menu .ant-menu-submenu-title:hover .ant-menu-title-content,
#main-menu .ant-menu-submenu-horizontal:hover .ant-menu-title-content,
#main-menu .ant-menu-submenu-active .ant-menu-title-content {
  color: #F79138 !important;
}

/* Active-submenu underline indicator (was theme.colorPrimaryBorderHover) */
#main-menu .ant-menu-submenu-horizontal::after {
  background-color: #F79138 !important;
}