/* Popup menu: the single menu primitive (replaces contextMenu.css and
   the flyouts component). Menus are real DOM elements with class .popup-menu,
   hidden until opened by popupMenu.js. */

/* iOS Safari only synthesizes click events on elements it considers
   clickable; the tapped node is often a DESCENDANT of the trigger (avatar
   image, icon span), so the pointer cursor must cover those too. */
[data-popup-menu],
[data-popup-menu] * {
    cursor: pointer;
}

.popup-menu {
    display: none;
    position: fixed;
    background-color: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small, 4px);
    /* Padding on all sides: focus-visible outlines on items would otherwise
       be clipped by overflow:hidden at the menu edges. */
    padding: 5px;
    min-width: 150px;
    box-shadow: var(--box-shadow-modal);
    /* Must stay above Leaflet's map controls (.leaflet-top/.leaflet-bottom
       use z-index ~1000), so the menu paints over the map and its backdrop. */
    z-index: 10000;
    overflow: hidden;
}

.popup-menu--open {
    display: block;
}

.popup-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.popup-menu ul li {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    border-radius: var(--border-radius-small, 4px);
}

.popup-menu ul li:hover,
.popup-menu ul li:focus-visible {
    background-color: var(--hover-color);
}

/* Generic item styles for link/select/button menus (e.g. user profile) */
.popup-menu select,
.popup-menu a,
.popup-menu button {
    font-size: .9rem;
    color: var(--shade900);
    padding: 0.4rem;
    transition: background-color .2s ease;
    border-radius: var(--border-radius-small, 4px);
    /* Items are flat at rest; loads after layout.css so this also shields
       menus from link/button styling of whatever container they sit in. */
    background-color: transparent;
}

/* A menu item is a menu item, whatever the element (links and <button>
   items share one block layout, so sheets and desktop menus line up). */
.popup-menu a,
.popup-menu button {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.popup-menu select:hover,
.popup-menu a:hover,
.popup-menu button:hover,
.popup-menu a:focus-visible,
.popup-menu button:focus-visible {
    background-color: var(--hover-color);
}

.popup-menu hr {
    margin: .5rem 1rem;
}

.popup-menu form {
    display: flex;
}

.popup-menu select {
    margin: 0;
    box-sizing: border-box;
    border: none;
    padding: 0.5rem 1rem;
    width: 100%;
    background-color: transparent;
}

.popup-menu a {
    display: block;
    text-decoration: none;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.popup-menu .disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Small screens: trigger-opened menus become a bottom sheet */
.popup-menu--sheet {
    left: 0 !important;
    right: 0 !important;
    top: unset !important;
    bottom: 0 !important;
    width: 100%;
    /* Mid-width windows: cap + auto-margins center the sheet (same treatment
       as dialogs); phones still get the full width. No transform — the sheet
       drag owns inline transform. */
    max-width: 500px;
    margin: 0 auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.popup-menu--sheet select,
.popup-menu--sheet a,
.popup-menu--sheet button {
    font-size: 1rem;
    font-weight: 500;
}

.popup-menu--sheet a,
.popup-menu--sheet button {
    padding: 1rem 1.8rem;
}

.popup-menu--sheet select {
    padding-left: 1.7rem;
    padding-right: 1.7rem;
}

.popup-menu--sheet ul li {
    padding: 1rem 1.8rem;
}

.popup-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    /* Just below .popup-menu, but still above Leaflet's ~1000-level map
       controls so the sheet backdrop covers them and blocks their clicks. */
    z-index: 9999;
}

.popup-menu-backdrop--active {
    display: block;
}