/**
 * Axanar Gin toolbar — sleek satin chrome (rail, flyouts, secondary bar).
 * Material tokens: axanar-admin.css (--axanar-satin-*, --axanar-panel-*).
 */

/* ---- Vertical rail shell ---- */

@media (min-width: 61em) {
  body.axanar-admin-toolbar .toolbar-menu-administration {
    background: var(--axanar-satin-rail-bg) !important;
    border-inline-end-color: var(--axanar-satin-edge) !important;
    box-shadow: var(--axanar-satin-sheen), 1px 0 0 color-mix(in srgb, black 4%, transparent);
  }

  html.gin--dark-mode body.axanar-admin-toolbar .toolbar-menu-administration {
    box-shadow: var(--axanar-satin-sheen), 1px 0 12px color-mix(in srgb, black 28%, transparent);
  }

  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
    height: 40px !important;
    margin-block-end: 2px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em;
    transition:
      color 0.18s var(--axanar-satin-ease),
      width 0.22s var(--axanar-satin-ease),
      background-color 0.18s var(--axanar-satin-ease);
  }

  /* Replace Gin's chunky hover slab with a slim satin pill */
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-icon::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-box > a.toolbar-icon::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon:focus::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-icon::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-box > a.toolbar-icon::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon.is-active::after {
    inset-block-start: 5px !important;
    height: 30px !important;
    width: calc(100% - 12px) !important;
    border-radius: 8px !important;
    background: var(--axanar-satin-hover) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent) !important;
    transition: background 0.18s var(--axanar-satin-ease), opacity 0.18s var(--axanar-satin-ease);
  }

  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-icon::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-box > a.toolbar-icon::after,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon.is-active::after {
    background: var(--axanar-satin-active) !important;
  }

  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-icon::before,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-box > a.toolbar-icon::before,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-icon::before,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-box > a.toolbar-icon::before {
    background: transparent !important;
    transition: color 0.18s var(--axanar-satin-ease), transform 0.18s var(--axanar-satin-ease);
  }

  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-icon::before,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-box > a.toolbar-icon::before {
    transform: translateY(-50%) scale(1.04);
  }

  /* Rail links stay above flyout panels */
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box {
    position: relative;
    z-index: 4;
  }

  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon::before,
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon::before {
    z-index: 1;
  }

  /* Flyout panels — offset past rail, no left bleed over icons */
  body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu,
  body.axanar-admin-toolbar .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
  body.axanar-admin-toolbar .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
    margin-inline-start: var(--gin-toolbar-width-collapsed) !important;
    z-index: 2 !important;
    background: var(--axanar-satin-flyout-bg) !important;
    border-inline-start-color: var(--axanar-satin-edge) !important;
    box-shadow:
      8px 0 28px color-mix(in srgb, black 10%, transparent),
      inset 1px 0 0 color-mix(in srgb, white 6%, transparent) !important;
  }

  [dir="ltr"] body.axanar-admin-toolbar .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
  [dir="ltr"] body.axanar-admin-toolbar .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu,
  [dir="rtl"] body.axanar-admin-toolbar .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
  [dir="rtl"] body.axanar-admin-toolbar .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
    box-shadow:
      8px 0 28px color-mix(in srgb, black 10%, transparent),
      inset 1px 0 0 color-mix(in srgb, white 6%, transparent) !important;
  }

  body.axanar-admin-toolbar[data-toolbar-menu="open"] .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
  body.axanar-admin-toolbar[data-toolbar-menu="open"] .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
    margin-inline-start: var(--gin-toolbar-width) !important;
  }

  html.gin--dark-mode body.axanar-admin-toolbar .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
  html.gin--dark-mode body.axanar-admin-toolbar .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
    box-shadow:
      10px 0 32px color-mix(in srgb, black 35%, transparent),
      inset 1px 0 0 color-mix(in srgb, white 4%, transparent) !important;
  }

  body.axanar-admin-toolbar .toolbar-menu-administration .toolbar-menu .toolbar-menu a {
    font-size: 0.8125rem !important;
    font-weight: 450 !important;
    letter-spacing: -0.01em;
    border-radius: 7px;
    transition: background 0.15s var(--axanar-satin-ease), color 0.15s var(--axanar-satin-ease);
  }

  body.axanar-admin-toolbar .toolbar-menu-administration .toolbar-menu .toolbar-menu a:hover,
  body.axanar-admin-toolbar .toolbar-menu-administration .toolbar-menu .toolbar-menu a:focus {
    background: var(--axanar-satin-hover) !important;
  }

  body.axanar-admin-toolbar .toolbar-menu-administration .toolbar-menu .toolbar-menu a.is-active {
    background: var(--axanar-satin-active) !important;
    font-weight: 500 !important;
  }

  body.axanar-admin-toolbar .toolbar-menu-administration .toolbar-menu__title a,
  body.axanar-admin-toolbar .toolbar-menu-administration .toolbar-menu__sub-title a {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
  }

  /* Close / pin control */
  body.axanar-admin-toolbar .toolbar-menu-administration a.toolbar-menu__trigger {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.6875rem !important;
    opacity: 0.72;
    transition: opacity 0.18s var(--axanar-satin-ease), color 0.18s var(--axanar-satin-ease);
  }

  body.axanar-admin-toolbar .toolbar-menu-administration a.toolbar-menu__trigger:hover {
    opacity: 1;
  }
}

/* ---- Top + secondary bars ---- */

body.axanar-admin-toolbar #gin-toolbar-bar,
body.axanar-admin-toolbar .gin-toolbar__inner {
  background: var(--axanar-satin-rail-bg) !important;
  border-bottom-color: var(--axanar-satin-edge) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

body.axanar-admin-toolbar .gin-secondary-toolbar {
  background: color-mix(in srgb, var(--gin-bg-header, var(--gin-bg-app)) 94%, var(--gin-bg-layer)) !important;
  border-bottom-color: var(--axanar-satin-edge) !important;
  backdrop-filter: blur(10px);
}

body.axanar-admin-toolbar #toolbar-administration-secondary .toolbar-item {
  border-radius: 7px !important;
  font-weight: 500 !important;
  transition: background 0.15s var(--axanar-satin-ease), border-color 0.15s var(--axanar-satin-ease), color 0.15s var(--axanar-satin-ease);
}

body.axanar-admin-toolbar #toolbar-administration-secondary .toolbar-item:hover,
body.axanar-admin-toolbar #toolbar-administration-secondary .toolbar-tab:hover > .toolbar-item {
  background: var(--axanar-satin-hover) !important;
  border-color: var(--axanar-satin-edge) !important;
}

body.axanar-admin-toolbar #toolbar-administration-secondary .toolbar-tray {
  border-radius: 10px !important;
  background: var(--axanar-satin-flyout-bg) !important;
  box-shadow: 0 8px 28px color-mix(in srgb, black 12%, transparent) !important;
}

/* ---- Axanar ops emphasis (lighter touch) ---- */

body.axanar-admin-toolbar .menu-item__axanar-admin-ux-hub > .toolbar-icon,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-hub > .toolbar-box > .toolbar-icon,
body.axanar-admin-toolbar .menu-item__axanar_admin_ux-hub > .toolbar-icon,
body.axanar-admin-toolbar .menu-item__axanar_admin_ux-hub > .toolbar-box > .toolbar-icon {
  font-weight: 600 !important;
}

body.axanar-admin-toolbar .menu-item--active-trail.menu-item__axanar-admin-ux-hub > .toolbar-icon,
body.axanar-admin-toolbar .menu-item--active-trail.menu-item__axanar-admin-ux-store > .toolbar-icon,
body.axanar-admin-toolbar .menu-item--active-trail.menu-item__axanar-admin-ux-content > .toolbar-icon,
body.axanar-admin-toolbar .menu-item--active-trail.menu-item__axanar-admin-ux-hub > .toolbar-box > .toolbar-icon,
body.axanar-admin-toolbar .menu-item--active-trail.menu-item__axanar-admin-ux-store > .toolbar-box > .toolbar-icon,
body.axanar-admin-toolbar .menu-item--active-trail.menu-item__axanar-admin-ux-content > .toolbar-box > .toolbar-icon {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--gin-color-text-light) 70%, transparent) !important;
}

body.axanar-admin-toolbar .menu-item__axanar-admin-ux-hub .toolbar-menu,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-store .toolbar-menu {
  border-left-color: var(--axanar-satin-edge) !important;
}

/* ---- Rail ordering (Axanar ops cluster pinned to top) ---- */

body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu {
  display: flex;
  flex-direction: column;
}

body.axanar-admin-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item {
  order: 50;
}

body.axanar-admin-toolbar .menu-item__root {
  order: -40;
}

body.axanar-admin-toolbar .menu-item__axanar_admin_ux-hub,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-hub {
  order: -30;
}

body.axanar-admin-toolbar .menu-item__axanar_admin_ux-store,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-store {
  order: -25;
}

body.axanar-admin-toolbar .menu-item__axanar_admin_ux-content,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-content {
  order: -20;
}

body.axanar-admin-toolbar .menu-item__axanar_admin_ux-site_preview,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-site-preview {
  order: -10;
}

body.axanar-admin-toolbar .menu-item__axanar_admin_ux-toolbox,
body.axanar-admin-toolbar .menu-item__admin_toolbar_tools-help {
  order: -5;
}

body.axanar-admin-toolbar .menu-item__axanar-admin-ux-hub .toolbar-menu,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-store .toolbar-menu {
  margin-left: 0.35rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--axanar-rail, var(--gin-border-color, #d4d4d4));
}

body.axanar-admin-toolbar .menu-item__axanar-admin-ux-hub .toolbar-menu a.is-active,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-store .toolbar-menu a.is-active,
body.axanar-admin-toolbar .menu-item__axanar-admin-ux-content .toolbar-menu a.is-active {
  color: var(--gin-color-text) !important;
  font-weight: 600;
}