/**
 * CloudMail application rail.
 *
 * The compact treatment is desktop/tablet-only. Roundcube's native phone menu
 * and its visible labels remain intact at 480px and below.
 */

/* Owner-requested presentation boundary; the upstream About command remains. */
#taskmenu a.about {
  display: none !important;
}

/* Light-first product direction. Remove this rule to restore the native toggle. */
#taskmenu a.theme {
  display: none !important;
}

@media screen and (min-width: 481px) {
  #layout {
    /*
     * Elastic exposes a small vertical overflow in the desktop shell. Hash
     * controls such as the theme switch can otherwise scroll the hidden
     * container and move every pane upward. Desktop panes own their scrolling,
     * so the outer shell must remain a non-scroll container.
     */
    overflow: clip !important;
  }

  #layout-menu {
    position: relative;
    z-index: 100;
    flex: 0 0 var(--cm-rail-width);
    width: var(--cm-rail-width) !important;
    overflow: visible;
    border-right: 1px solid var(--cm-color-border);
    background: var(--cm-color-surface-subtle) !important;
  }

  html #layout-menu > .popover-header {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(var(--cm-rail-width) - 1px) !important;
    height: var(--cm-rail-width) !important;
    min-height: var(--cm-rail-width) !important;
    padding: 0 !important;
    line-height: normal !important;
    background-color: var(--cm-color-surface-subtle) !important;
    border: 0 !important;
  }

  html #layout-menu > .popover-header img#logo {
    box-sizing: border-box;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    content: url("../assets/icons/brand/cloudmail-mark.svg");
    object-fit: contain;
  }

  #taskmenu {
    overflow: visible;
    color: var(--cm-color-text-muted);
  }

  #taskmenu .action-buttons {
    box-sizing: border-box;
    display: flex !important;
    width: calc(var(--cm-rail-width) - 1px) !important;
    padding: 4px 5px 0 6px !important;
  }

  #taskmenu .special-buttons {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    width: calc(var(--cm-rail-width) - 1px) !important;
    padding: 0 0 4px !important;
    background: var(--cm-color-surface-subtle) !important;
  }

  #taskmenu a {
    position: relative;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--cm-rail-control-size) !important;
    height: var(--cm-rail-control-size) !important;
    min-height: var(--cm-rail-control-size);
    margin: 4px 5px 0 6px !important;
    padding: 0 !important;
    border: 0;
    border-radius: var(--cm-radius-control);
    color: var(--cm-color-text-muted) !important;
    background: transparent !important;
    transition:
      color var(--cm-motion-fast) ease,
      background-color var(--cm-motion-fast) ease;
  }

  #taskmenu a:hover {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface) !important;
  }

  #taskmenu a.selected,
  #taskmenu a.selected:hover {
    color: var(--cm-color-accent-strong) !important;
    background: var(--cm-color-accent-soft) !important;
  }

  #taskmenu a:focus-visible {
    color: var(--cm-color-accent-strong) !important;
    background: var(--cm-color-surface) !important;
    outline: 2px solid var(--cm-color-focus);
    outline-offset: 2px;
  }

  #taskmenu a:active {
    transform: none;
  }

  #taskmenu .action-buttons a.compose {
    margin: 0 !important;
  }

  #taskmenu a.logout,
  #taskmenu a.logout:hover {
    color: var(--cm-color-danger) !important;
  }

  /* Smaller artwork, not smaller hit targets (44px). */
  #taskmenu a:is(.theme, .logout) {
    --cm-rail-utility-icon-size: 18px;
  }

  #taskmenu a > .inner {
    position: absolute !important;
    top: 50%;
    left: calc(100% + 0.625rem);
    z-index: 1000;
    display: block !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    color: var(--cm-color-tooltip-text);
    background: var(--cm-color-tooltip-surface);
    border-radius: var(--cm-radius-tooltip);
    box-shadow: var(--cm-shadow-tooltip);
    opacity: 0;
    transform: translateY(-50%) translateX(-0.25rem);
    transition:
      opacity var(--cm-motion-fast) ease,
      transform var(--cm-motion-fast) ease;
  }
}

@media screen and (max-width: 480px) {
  #taskmenu .cm-agenda-preview {
    display: none;
  }
}

/* A late plugin task also wins if it arrives after the footer script ran. */
#taskmenu:has(a.calendar, a[href*="_task=calendar"], a[data-task="calendar"]) a.cm-agenda-preview {
  display: none !important;
}

/* The D2 hint layer owns desktop/medium tooltips; native 481–768 px stays CSS-only. */
@media screen and (min-width: 481px) and (max-width: 768px) {
  #taskmenu a:is(:hover, :focus-visible) > .inner {
    width: max-content;
    max-width: 12rem;
    height: auto;
    padding: 0.4375rem 0.625rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@media screen and (min-width: 481px) and (prefers-reduced-motion: reduce) {
  #taskmenu a,
  #taskmenu a > .inner {
    transition: none;
  }
}