/**
 * CloudMail interaction-surface foundation.
 *
 * Refines Roundcube/Elastic Bootstrap popovers, action menus, and tooltips on
 * desktop and medium layouts. Native commands, ARIA state, focus management,
 * positioning and submenu lifecycle remain owned by Roundcube. Menu glyphs
 * share one optical size, including the native compact and editor menus.
 */

/* Native single-choice Bootstrap controls, not multiselects or plugin proxies.
   A select cannot host a reliable mask pseudo-element. These backgrounds keep
   pinned Lucide chevron-down geometry and use the muted light/dark token colors;
   currentColor inside an external SVG would not inherit the control's color. */
:root {
  --cm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html.dark-mode {
  --cm-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body select.custom-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):not(.select2-hidden-accessible) {
  padding-right: 32px !important;
  background-image: var(--cm-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: calc(var(--cm-dropdown-icon-size) * 1px) calc(var(--cm-dropdown-icon-size) * 1px) !important;
}

/* Keep the native selection/status class and its reserved gutter at every width. */
body .select-menu ul.listing > li > a::before {
  box-sizing: border-box;
  display: block !important;
  float: left !important;
  width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
  min-width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
  max-width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
  /* Match the compact native line-height, but paint only a centered 16px check. */
  height: 1lh !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 calc(var(--cm-dropdown-icon-size) * 1px);
  content: "" !important;
  background-color: transparent;
  -webkit-mask: url("../assets/icons/ui/lucide/regular/check.svg") center / calc(var(--cm-dropdown-icon-size) * 1px) no-repeat;
  mask: url("../assets/icons/ui/lucide/regular/check.svg") center / calc(var(--cm-dropdown-icon-size) * 1px) no-repeat;
}

body .select-menu ul.listing > li > a.selected::before {
  background-color: var(--cm-color-accent-strong);
}

/* Preserve native compact menu geometry, fonts and semantics; size drawings only. */
body .popupmenu :is(ul.menu, ul.toolbarmenu, ul.listing) > li > a::before,
body .popupmenu :is(ul.menu, ul.toolbarmenu, ul.listing) > li > a[aria-haspopup="true"]::after,
body .popupmenu a.close::before,
body .select-menu a.close::before,
body .select-menu ul.listing > li > a::before {
  font-size: calc(var(--cm-dropdown-icon-size) * 1px) !important;
}

/* TinyMCE menu SVGs may lack viewBox. Keep 24px canvases/gutters and scale paint,
   never toolbar icons, authored content, palette swatches or menu positioning. */
body .tox-tinymce-aux .tox-menu svg {
  width: 24px;
  height: 24px;
  transform: scale(calc(var(--cm-dropdown-icon-size) / 24));
  transform-origin: center;
}

body .tox-tinymce-aux .tox-menu .tox-collection__item-icon {
  font-size: calc(var(--cm-dropdown-icon-size) * 1px);
}

@media screen and (min-width: 769px) {
  body .popover.select-menu {
    min-width: 196px !important;
    max-width: min(360px, calc(100vw - 28px)) !important;
  }

  body .select-menu ul.listing,
  body .select-menu ul.listing > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none;
  }

  body .select-menu ul.listing > li + li {
    margin-top: 2px !important;
  }

  body .select-menu ul.listing > li > a {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: var(--cm-radius-menu-item);
    color: var(--cm-color-text) !important;
    background: transparent !important;
    font: 500 13px/20px var(--cm-font-sans) !important;
    text-align: left;
    text-decoration: none !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body .select-menu ul.listing > li > a::before {
    display: block !important;
    float: none !important;
    height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    min-height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    max-height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    margin: 0 !important;
  }

  body .select-menu ul.listing > li > a:is(:hover, :focus) {
    background: var(--cm-color-surface-hover) !important;
  }

  body .select-menu ul.listing > li > a.selected {
    color: var(--cm-color-accent-strong) !important;
    background: var(--cm-color-accent-soft) !important;
  }

  body .select-menu ul.listing > li > a:focus-visible {
    outline: 2px solid var(--cm-color-focus) !important;
    outline-offset: -2px;
  }

  body .select-menu ul.listing > li > a:is(.disabled, [aria-disabled="true"]) {
    color: var(--cm-color-text-muted) !important;
    background: transparent !important;
    opacity: 0.42;
  }

  body .popover {
    box-sizing: border-box;
    padding: 5px !important;
    color: var(--cm-color-text) !important;
    border: 1px solid var(--cm-color-border) !important;
    border-radius: var(--cm-radius-popover) !important;
    background: var(--cm-color-surface) !important;
    box-shadow: var(--cm-shadow-popover) !important;
    overflow: visible;
  }

  body .popover .popover-body {
    padding: 0 !important;
    color: inherit !important;
    border-radius: calc(var(--cm-radius-popover) - 5px);
    background: transparent !important;
    overflow: auto;
  }

  body .popover .popupmenu {
    min-width: 204px;
    max-width: min(310px, calc(100vw - 28px));
    color: inherit !important;
    background: transparent !important;
  }

  body .popover .popupmenu:is(#forward-menu, #message-menu, #mailboxoptions-menu) {
    min-width: 250px;
  }

  body .popover .popupmenu > :is(ul.menu, ul.toolbarmenu),
  body .popover .popupmenu > .scroller > :is(ul.menu, ul.toolbarmenu) {
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li {
    box-sizing: border-box;
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li + li {
    margin-top: 2px !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a {
    box-sizing: border-box;
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: var(--cm-color-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-align: left;
    text-decoration: none !important;
    white-space: normal;
    border: 0 !important;
    border-radius: var(--cm-radius-menu-item) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
      color var(--cm-motion-fast) ease,
      background-color var(--cm-motion-fast) ease;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a:is(:hover, :focus),
  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li.selected > a,
  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a.selected {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface-hover) !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a:focus-visible {
    outline: 2px solid var(--cm-color-focus) !important;
    outline-offset: -2px;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a:is(.disabled, [aria-disabled="true"]) {
    color: var(--cm-color-text-muted) !important;
    opacity: 0.42;
    background: transparent !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a:is(.purge, .delete) {
    color: var(--cm-color-danger) !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a:is(.purge, .delete):is(:hover, :focus) {
    background: var(--cm-color-danger-soft) !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a::before {
    box-sizing: border-box;
    display: none !important;
    float: none !important;
    flex: 0 0 18px;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    content: "" !important;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: var(--cm-menu-icon) center / calc(var(--cm-dropdown-icon-size) * 1px) no-repeat;
    mask: var(--cm-menu-icon) center / calc(var(--cm-dropdown-icon-size) * 1px) no-repeat;
    font-family: inherit !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  body .popover .popupmenu :is(ul.menu, ul.toolbarmenu) > li > a:is(
    .reply,
    .forward,
    .print,
    .import,
    .download,
    .edit,
    .source,
    .move,
    .copy,
    .extwin,
    .read,
    .unread,
    .flag,
    .unflag,
    .expunge,
    .purge,
    .delete,
    .folders,
    .selection,
    .select,
    .expand
  )::before,
  body .popover #attachmentmenu .menu > li > a.rename::before,
  body .popover #dragmessage-menu .menu > li > a::before,
  body .popover #zipdownload-menu .menu > li > a::before {
    display: block !important;
  }

  body .popover .popupmenu a.reply {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/reply-all.svg");
  }

  body .popover .popupmenu a.forward {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/forward.svg");
  }

  body .popover .popupmenu a:is(.print, .edit, .copy) {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/file-text.svg");
  }

  body .popover .popupmenu a:is(.import, .extwin) {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/external-link.svg");
  }

  body .popover .popupmenu a.download,
  body .popover #zipdownload-menu .menu > li > a {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/download.svg");
  }

  /* Native attachment action only; leave unrelated/plugin rename rows alone. */
  body .popover #attachmentmenu a.rename {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/pencil.svg");
  }

  body .popover .popupmenu a.source {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/align-left.svg");
  }

  body .popover .popupmenu a:is(.move, .folders),
  body .popover #dragmessage-menu .menu > li:first-child > a {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/folder.svg");
  }

  body .popover #dragmessage-menu .menu > li:last-child > a {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/file-text.svg");
  }

  body .popover .popupmenu a:is(.read, .unread) {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/mail.svg");
  }

  body .popover .popupmenu a:is(.flag, .unflag) {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/flag.svg");
  }

  body .popover .popupmenu a.expunge {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/archive.svg");
  }

  body .popover .popupmenu a:is(.purge, .delete) {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/trash-2.svg");
  }

  body .popover .popupmenu a:is(.selection, .select) {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/square-check-big.svg");
  }

  body .popover .popupmenu a.expand {
    --cm-menu-icon: url("../assets/icons/ui/lucide/regular/chevron-down.svg");
  }

  body .popover .popupmenu a[aria-haspopup="true"]::after {
    display: block !important;
    flex: 0 0 calc(var(--cm-dropdown-icon-size) * 1px);
    width: calc(var(--cm-dropdown-icon-size) * 1px);
    height: calc(var(--cm-dropdown-icon-size) * 1px);
    /* Elastic's inherited 1.18em minimum otherwise widens the submenu gutter. */
    min-width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    max-width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    min-height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    max-height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    margin-left: auto;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: url("../assets/icons/ui/lucide/regular/chevron-right.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/chevron-right.svg") center / contain no-repeat;
  }

  body .popover > .arrow::before,
  body .popover > .arrow::after {
    filter: none !important;
  }

  body .bs-popover-bottom > .arrow::before {
    border-bottom-color: var(--cm-color-border) !important;
  }

  body .bs-popover-bottom > .arrow::after {
    border-bottom-color: var(--cm-color-surface) !important;
  }

  body .bs-popover-top > .arrow::before {
    border-top-color: var(--cm-color-border) !important;
  }

  body .bs-popover-top > .arrow::after {
    border-top-color: var(--cm-color-surface) !important;
  }

  body .bs-popover-left > .arrow::before {
    border-left-color: var(--cm-color-border) !important;
  }

  body .bs-popover-left > .arrow::after {
    border-left-color: var(--cm-color-surface) !important;
  }

  body .bs-popover-right > .arrow::before {
    border-right-color: var(--cm-color-border) !important;
  }

  body .bs-popover-right > .arrow::after {
    border-right-color: var(--cm-color-surface) !important;
  }

  body .tooltip .tooltip-inner {
    max-width: 240px;
    padding: 7px 10px !important;
    color: var(--cm-color-tooltip-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 16px;
    border-radius: var(--cm-radius-tooltip) !important;
    background: var(--cm-color-tooltip-surface) !important;
    box-shadow: var(--cm-shadow-tooltip);
  }
}

/* The preview frame uses the parent layout even when its own viewport is narrow. */
body:is(.task-mail, .task-addressbook) .cm-tooltip {
  position: fixed;
  z-index: 1400;
  box-sizing: border-box;
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 7px 10px;
  color: var(--cm-color-tooltip-text);
  background: var(--cm-color-tooltip-surface);
  border-radius: var(--cm-radius-tooltip);
  box-shadow: var(--cm-shadow-tooltip);
  font: 500 12px/16px var(--cm-font-sans);
  white-space: normal;
}

body:is(.task-mail, .task-addressbook) .cm-tooltip[hidden] {
  display: none !important;
}