/* =========================================================================
   FE 3.0 — "+ New Ticket" wizard dropdown
   -------------------------------------------------------------------------
   WHY:    Replaces the single-action "+ New Ticket" buttons on the FE 3.0
           pages (tickets dashboard, app dashboard) with a workflow picker
           dropdown so advisors can choose the right wizard (Quick Ticket,
           New Business, Account Service, Distributions, Trading, etc.)
           directly from the trigger button. Visual treatment matches the
           IAMS Tickets mockup (`.cursor/assets/iams-3-0/IAMS Tickets.html`)
           but uses the existing 3.0 design tokens so it stays in lock-step
           with the rest of the FE 3.0 surface.
   PROMPT: "Build the dropdown widget in FusionElements-frontend:
            public/3.0/js/fe30-new-ticket-menu.js and
            public/3.0/css/fe30-new-ticket-menu.css, replicating the
            .wizard-menu / .wiz-item visuals from IAMS Tickets.html using
            3.0 tokens"
   DATE:   2026-05-08
   WHAT:   Defines styles for the wrapper, popover, header, item rows,
           icon swatches, and the open/closed state. All selectors are
           scoped under `.fe30-new-ticket-menu` so they cannot bleed onto
           other 3.0 surfaces.
   ASSUMPTIONS: tokens-base.css is loaded by the host page so the CSS
                custom properties used below are available.
   ========================================================================= */

/* Anchor wrapper — sits next to the trigger <button> and lets the popover
   absolute-position itself relative to the button. */
.fe30-new-ticket-menu-wrap {
  position: relative;
  display: inline-flex;
}

/* Popover body — invisible by default, animates open via .open class. */
.fe30-new-ticket-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--bg-white, #FFFFFF);
  border: 1px solid var(--gray-300, #D1D5DB);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.10));
  padding: 8px;
  z-index: 1100;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity   var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  font-family: var(--font-sans, 'Inter', sans-serif);
}
.fe30-new-ticket-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Optional pointer arrow above the menu, points back at the trigger. */
.fe30-new-ticket-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: var(--bg-white, #FFFFFF);
  border-top: 1px solid var(--gray-300, #D1D5DB);
  border-left: 1px solid var(--gray-300, #D1D5DB);
  transform: rotate(45deg);
}

/* Header section — title + subtitle. */
.fe30-new-ticket-menu .fe30-wiz-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--gray-300, #D1D5DB);
  margin-bottom: 6px;
}
.fe30-new-ticket-menu .fe30-wiz-title {
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  color: var(--dark-navy, #202F3D);
  letter-spacing: 0.01em;
}
.fe30-new-ticket-menu .fe30-wiz-sub {
  font-size: 12px;
  color: var(--gray-500, #6B7280);
  margin-top: 2px;
}

/* Each row — icon + (name + description) + chevron. */
.fe30-new-ticket-menu .fe30-wiz-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 8px);
  transition: background var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.fe30-new-ticket-menu .fe30-wiz-item:hover,
.fe30-new-ticket-menu .fe30-wiz-item:focus-visible {
  background: var(--bg-gray-100, #F3F4F6);
  outline: none;
}

/* Icon swatch on the left — color is tinted per item via inline style. */
.fe30-new-ticket-menu .fe30-wiz-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 8px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe30-new-ticket-menu .fe30-wiz-icon svg {
  width: 18px;
  height: 18px;
}

/* Text block — name + description, ellipsis on overflow. */
.fe30-new-ticket-menu .fe30-wiz-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.fe30-new-ticket-menu .fe30-wiz-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-primary, #0A0A0A);
}
.fe30-new-ticket-menu .fe30-wiz-desc {
  display: block;
  font-size: 12px;
  color: var(--gray-500, #6B7280);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron arrow on the right. */
.fe30-new-ticket-menu .fe30-wiz-arrow {
  color: var(--gray-400, #9CA3AF);
  font-size: 18px;
  line-height: 1;
  margin-left: 4px;
}

/* ── Featured card ──────────────────────────────────────────────────
   Promoted item (Quick Ticket) gets a tinted background and subtle
   border so it reads as the primary action at a glance. The element
   keeps the `.fe30-wiz-item` class so the click delegate works
   unchanged; `.fe30-wiz-featured` layers on the visual promotion. */
.fe30-new-ticket-menu .fe30-wiz-featured {
  background: rgba(251, 106, 24, 0.06);
  border: 1px solid rgba(251, 106, 24, 0.15);
  padding: 12px;
  margin-bottom: 4px;
}
.fe30-new-ticket-menu .fe30-wiz-featured:hover,
.fe30-new-ticket-menu .fe30-wiz-featured:focus-visible {
  background: rgba(251, 106, 24, 0.12);
}

/* ── Section group labels ───────────────────────────────────────────
   Lightweight uppercase headers that separate item groups inside the
   popover (e.g. "Account Operations", "Money Movement"). */
.fe30-new-ticket-menu .fe30-wiz-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400, #9CA3AF);
  padding: 10px 12px 4px;
  margin-top: 4px;
}
.fe30-new-ticket-menu .fe30-wiz-group-label ~ .fe30-wiz-group-label {
  border-top: 1px solid var(--gray-200, #E5E7EB);
  margin-top: 6px;
  padding-top: 12px;
}

/* When the trigger button is highlighted/expanded, give it a subtle
   accent so users know the menu is connected to it. */
.fe30-new-ticket-menu-wrap [aria-expanded="true"] {
  box-shadow: var(--shadow-focus-orange, 0 0 0 3px rgba(251, 106, 24, 0.25));
}