/* C-ERP · Mark-ups exporteren (WP31). Knop met formaatkeuze en de voortgangsmelding. */
.mxe { position: relative; display: inline-flex; }
.mxe-menu { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; width: 360px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.mxe-menu__kop { padding: 8px 10px 6px; font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: .02em; }
.mxe-menu__voet { margin-top: 4px; padding: 8px 10px 6px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.mxe-optie { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.mxe-optie:hover, .mxe-optie:focus-visible { background: var(--bg-2); outline: none; }
.mxe-optie b { font-size: 13px; font-weight: 500; }
.mxe-optie span { font-size: 12px; line-height: 1.45; color: var(--text-2); white-space: normal; }
.mxe-taak { position: absolute; z-index: 65; top: calc(100% + 6px); right: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--brand); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.mxe-taak.is-klaar { border-left-color: var(--pos); }
.mxe-taak.is-fout { border-left-color: var(--signal); }
.mxe-taak__kop { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mxe-taak__sluit { margin-left: auto; border: none; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.mxe-taak__sluit:hover { color: var(--text); }
.mxe-taak__regel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); word-break: break-all; }
.mxe-taak.is-fout .mxe-taak__regel { color: var(--signal); word-break: normal; }
.mxe-taak__klein { font-size: 11.5px; line-height: 1.45; color: var(--text-3); word-break: normal; }
.mxe-taak__knop { align-self: flex-start; margin-top: 2px; text-decoration: none; }
.mxe-draai { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brand); animation: mxe-draai .8s linear infinite; }
@keyframes mxe-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mxe-draai { animation: none; } }
/* E10: keuze commentaarronde */
.mxe-ronde { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.mxe-ronde select { height: 32px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 0 8px; font: 400 12.5px/1.2 'Roboto', sans-serif; max-width: 100%; }
.mxe-optie:disabled { opacity: .5; cursor: default; }
.mxe-optie:disabled:hover { background: transparent; }