/* ═══════════════════════════════════════════════════════════════════════════════════════
   MENU — one component, every surface
   ═══════════════════════════════════════════════════════════════════════════════════════
   Routes and Schedule open menus off a ⋯, off a +, off the bulk-action bar and out of a
   panel footer. They had grown into six near-copies: 36px rows here and 44px there, 8/12/16
   of padding, two different shadows, three glyph sizes, dividers with and without margins.
   This file is the single definition. A page supplies only what is genuinely local —
   position, z-index, min-width, and which way the menu opens.

   Metrics follow the design system's list menu (Figma 1306:5287) at this product's 40px
   control height rather than the component's 44:

     Shell    hairline + two-layer shadow, 8px radius, no padding, clipped to the radius
     Row      40px tall · 10px/12px · 8px gap · 16px glyph · 14/20 text · full-bleed hover
     Head     32px · 8px/12px · 12/16 hushed — a label, not a row
     Divider  1px, edge to edge, nothing above or below it

   New menus should use .vmenu / .vmenu-item / .vmenu-head / .vmenu-sep. The other selectors
   are the existing menus, mapped onto the same rules so they can't drift again.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────────────────────────────────────────────
   The 1px ring is the first shadow layer, not a border: a real border would add a pixel to
   the box and push every row's full-bleed hover in by one. */
.vmenu,
.rd-opt-menu,
.bt-menu,
.device-frame .sch-actions-pop,
.sch-overflow-menu,
.sch-view-menu,
.sch-view-submenu,
.device-frame .dx-toast-menu {
  padding: 0;
  background: #fff;
  border: none;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px rgba(145,145,123,0.2),
              1px 4px 8px rgba(0,0,0,0.15),
              2px 12px 24px rgba(0,0,0,0.1);
  font-family: var(--font-sans, inherit);
  overflow: hidden;            /* clips the full-bleed rows to the radius */
}
/* The view menu is the exception: its "Number of days" and "Orientation" submenus hang
   outside the box, so it cannot clip. Its end rows carry the radius instead (page CSS). */
.sch-view-menu { overflow: visible; }

/* ── Row ───────────────────────────────────────────────────────────────────────────────
   A 20px line inside 10px of padding is exactly 40 — the height of a button on these pages,
   so a menu row and the control that opened it measure the same. */
.vmenu-item,
.rd-opt-menu button,
.bt-menu button,
.device-frame .sch-actions-pop button:not(.sch-pop-slot-x),
.sch-overflow-item,
.sch-view-opt,
.sch-view-submenu button,
.device-frame .dx-toast-bar .dx-toast-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fg-primary, #100f0f);
  font-family: var(--font-sans, inherit);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.vmenu-item:hover,
.rd-opt-menu button:hover,
.bt-menu button:hover,
.device-frame .sch-actions-pop button:not(.sch-pop-slot-x):hover,
.sch-overflow-item:hover,
.sch-view-opt:hover,
.sch-view-submenu button:hover,
.device-frame .dx-toast-bar .dx-toast-menu button:hover {
  background: var(--bg-tertiary, #f3f3ee);
}

/* Row glyphs are 16px. !important because nearly every row sizes its icon inline — phIcon
   writes a style attribute, and the markup passes var(--icon-md) — and three glyph sizes
   across four menus was the most visible part of the drift. */
.vmenu-item > svg, .vmenu-item > i,
.rd-opt-menu button > svg, .rd-opt-menu button > i,
.bt-menu button > svg, .bt-menu button > i,
.device-frame .sch-actions-pop button > svg, .device-frame .sch-actions-pop button > i,
.sch-overflow-item > svg, .sch-overflow-item > i,
.sch-view-opt > svg, .sch-view-opt > i,
.sch-view-submenu button > svg, .sch-view-submenu button > i,
.device-frame .dx-toast-bar .dx-toast-menu button > svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: inherit;
}
/* The X on the slot menu's header is a control, not a row — it keeps its own 24px box. */
.device-frame .sch-actions-pop .sch-pop-slot-x > svg,
.device-frame .sch-actions-pop .sch-pop-slot-x > i {
  width: 16px !important; height: 16px !important;
}

/* ── Section head ──────────────────────────────────────────────────────────────────────
   32px: 16px of text inside 8px of padding. Hushed and regular — a quiet label above a
   group, never something that looks clickable. */
.vmenu-head,
.sch-view-grouphead {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  font-family: var(--font-sans, inherit);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--fg-hushed, #64605e);
}

/* ── Divider ───────────────────────────────────────────────────────────────────────────
   Edge to edge with no space around it: the rows' own padding is the breathing room, and a
   margin here put a different gap above each group depending on which menu you were in. */
.vmenu-sep,
.sch-view-sep,
.sch-actions-sep,
.bt-sep {
  height: 1px;
  margin: 0;
  flex: none;
  background: var(--border, #e5e1de);
}

/* ── States ────────────────────────────────────────────────────────────────────────────
   Disabled rows read as tinted-and-greyed in every menu, and a destructive row is red text
   on the menu's own hover — never a red wash. */
.vmenu-item:disabled, .vmenu-item.locked,
.rd-opt-menu button:disabled, .rd-opt-menu button.locked,
.bt-menu button.bt-locked {
  color: var(--fg-disabled, #9c9591);
  background: #f8f7f6;
  cursor: default;
}
.vmenu-item:disabled:hover, .vmenu-item.locked:hover,
.rd-opt-menu button:disabled:hover, .rd-opt-menu button.locked:hover,
.bt-menu button.bt-locked:hover {
  background: #f8f7f6;
}
.vmenu-item.is-danger,
.rd-opt-menu button.rd-opt-danger,
.bt-menu button.is-danger,
.device-frame .sch-actions-pop button.is-danger,
.device-frame .dx-toast-bar .dx-toast-menu button.is-danger {
  color: #c0362c;
}