/* Contextmenu (F5.1, components/contextmenu.js): rechtsklik-menu in de
   huisstijl, zelfde beeldtaal als de bestaande dropdown-menu's in de mail
   (.mail-instel__menu / .mail-verplaats__item): vlak wit kaartje met 1px-rand
   en lichte schaduw. Body-gepositioneerd (position: fixed, geklemd binnen de
   viewport door het component); z-index boven de modals (mail-modal 80,
   taakmodal 90) zodat het menu overal bruikbaar is, onder de bevestigdialoog
   (100) en de toasts (120). */
.contextmenu {
  position: fixed;
  z-index: 95;
  min-width: 220px;
  max-width: 320px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  outline: none;
}

/* Kopregel: het doel van het menu (mapnaam, onderwerp of "3 berichten"). */
.contextmenu__kop {
  padding: 4px 8px 3px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contextmenu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
}
.contextmenu__item:hover,
.contextmenu__item:focus-visible { background: var(--bg-50); outline: none; }
.contextmenu__item:disabled { opacity: .45; cursor: default; }
.contextmenu__item:disabled:hover { background: none; }
.contextmenu__item svg { width: 16px; height: 16px; flex: none; color: var(--blue-700); }
.contextmenu__item--gevaar { color: var(--err); }
.contextmenu__item--gevaar svg { color: var(--err); }

/* Uitlijn-plaatshouder voor items zonder icoon (labels blijven in een kolom). */
.contextmenu__geen-ico { width: 16px; flex: none; }
.contextmenu__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* Kleurstip bij een kleurkeuze-item (OR12 mapkleuren); zelfde uitlijning als een
   icoon, met een dunne 1px-rand zodat een lichte kleur op wit zichtbaar blijft. */
.contextmenu__stip {
  width: 14px;
  height: 14px;
  flex: none;
  margin: 0 1px;
  border-radius: 50%;
  border: 1px solid rgba(28, 42, 57, .25);
}

/* Vinkje rechts bij de actieve keuze in een keuzemenu. */
.contextmenu__item svg.contextmenu__vink { width: 14px; height: 14px; color: var(--blue-700); }

/* Chevron rechts bij een item met drill-down (submenu). */
.contextmenu__item svg.contextmenu__sub { width: 14px; height: 14px; color: var(--muted); }

.contextmenu__scheiding {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}