:root {
  --m-gap: 10px;
  --m-radius: 10px;
  --m-border: #e5e7eb; /* gray-200 */
  --m-bg: linear-gradient(to right, gray, lightgray); 
  --m-bg-hover: #dbe3eb; /* slate-50 */
  --m-fg: #111827; /* gray-900 */
  --m-muted: #6b7280; /* gray-500 */
  --m-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
}

.flux-main-menu, #main-menu {
  padding: 8px 12px;
  border-bottom: 1px solid var(--m-border);
  background: var(--m-bg);
}

.flux-menu-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--m-gap);
  flex-wrap: wrap;
}

.flux-menu-items > li {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

/* вид пункта меню */
.flux-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  background: linear-gradient(to right, rgb(197, 192, 192), rgb(153, 152, 152));
  color: var(--m-fg);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.flux-menu-link:hover {
  background: var(--m-bg-hover);
}

.flux-menu-link:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* индикатор наличия подменю */
.flux-menu-items > li.has-submenu > .flux-menu-link::after {
  content: "▾";
  font-size: 12px;
  color: var(--m-muted);
}

/* === ПЛАВНОЕ ПАДАЮЩЕЕ ПОДМЕНЮ === */
/* Базовое состояние — скрытое */
.flux-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;

  transform: translateX(8px) translateY(-6px) scale(0.98);
  transform-origin: top left;

  min-width: 220px;
  max-width: min(92vw, 380px);
  max-height: 70vh;
  overflow: auto;

  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .2s ease-out,
    transform .2s cubic-bezier(.16, .75, .45, 1);
}

/* выравнивание вправо */
.flux-submenu.align-right {
  left: auto;
  right: 0;
  transform: translateX(-8px) translateY(-6px) scale(0.98);
  transform-origin: top right;
}

/* когда li открыт — показываем меню */
.flux-menu-items > li.open > .flux-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(8px) translateY(0) scale(1);
}

.flux-menu-items > li.open > .flux-submenu.align-right {
  transform: translateX(-8px) translateY(0) scale(1);
}

/* элементы подменю */
.flux-submenu > li {
  position: relative;
  margin: 0;
}

.flux-submenu-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--m-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.flux-submenu-link:hover {
  background: var(--m-bg-hover);
}

/* === Вложенные подменю (flyout) === */

.flux-submenu .flux-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 10px;

  max-height: none;
  overflow: visible;

  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;

  z-index: 1001;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .2s ease-out,
    transform .2s cubic-bezier(.16, .75, .45, 1);
}

/* флип влево */
.flux-submenu .flux-submenu.align-right {
  left: auto;
  right: 10px;
  transform-origin: top right;
}

/* открытие вложенного меню */
.flux-submenu > li.open > .flux-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* стрелки */
.flux-submenu > li.has-submenu > .flux-submenu-link::after {
  content: "▸";
  font-size: 12px;
  color: var(--m-muted);
  margin-left: 8px;
}

.flux-submenu > li.open > .flux-submenu.align-right ~ .flux-submenu-link::after {
  content: "◂";
}

/* не обрезать flyouts */
.flux-menu-items > li > .flux-submenu {
  overflow: visible;
}

.title-fields { width: 100%;}