/* ─── DMU Dropdown Component ───
   Fully self-contained dropdown panel.
   Apply .dmu-dropdown to any container — no extra styling needed.

   Structure:
     <div class="dmu-dropdown">
       <li class="dmu-dropdown-item">
         <a/button class="dmu-dropdown-link">
           <span class="dmu-dropdown-link-inner">
             <span class="dmu-dropdown-icon-wrapper">
               <i data-lucide="..."></i>
             </span>
             <span class="dmu-dropdown-label">Label</span>
           </span>
         </a/button>
       </li>
       <li class="dmu-dropdown-divider"></li>
     </div>
*/

/* ─── Panel ─── */

.dmu-dropdown {
    /* Panel inner spacing — referenced by .dmu-dropdown-divider's negative
       margin so the line extends edge-to-edge regardless of how deeply
       wrapped its <li> sits. Single source of truth: change here and the
       divider automatically tracks. */
    --dmu-dropdown-padding: 0.5rem;

    position: absolute;
    z-index: 1100;
    border-radius: 0.9rem !important;
    padding: var(--dmu-dropdown-padding) !important;
    border: 1px solid var(--dmu-dropdown-border) !important;
    background: var(--dmu-dropdown-bg) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    max-height: 580px;
    overflow-y: auto;

    /* Direction-aware animation variables */
    --_dd-tx: 0px;
    --_dd-ty: -8px;
    --_dd-origin-x: left;
    --_dd-origin-y: top;
    --_dd-item-tx: 0px;
    --_dd-item-ty: -6px;

    /* Panel open animation.
       Use individual `scale`/`translate` properties — Popper writes an inline
       `transform` to position the menu, so animating `transform` here clobbers
       its placement and the panel flies in from the offset parent's origin. */
    opacity: 0;
    scale: 0.96;
    translate: var(--_dd-tx) var(--_dd-ty);
    transform-origin: var(--_dd-origin-y) var(--_dd-origin-x);
    transition:
        opacity 0.24s ease,
        scale 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        translate 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dmu-dropdown.show {
    opacity: 1;
    scale: 1;
    translate: 0 0;
}

/* Close animation. JS adds .dmu-closing while .show is still present so the
   panel fades back to its closed state before Bootstrap tears it down — keeps
   Popper's positioning transform intact during the fade. */
.dmu-dropdown.show.dmu-closing {
    opacity: 0;
    scale: 0.96;
    translate: var(--_dd-tx) var(--_dd-ty);
}

/* ─── Direction overrides ─── */

.dmu-dropdown.dropdown-menu-end {
    --_dd-origin-x: right;
}

.dropup > .dmu-dropdown {
    --_dd-ty: 8px;
    --_dd-origin-y: bottom;
    --_dd-item-ty: 6px;
}

.dropend > .dmu-dropdown {
    --_dd-tx: -8px;
    --_dd-ty: 0px;
    --_dd-origin-x: left;
    --_dd-origin-y: center;
    --_dd-item-tx: -6px;
    --_dd-item-ty: 0px;
}

.dropstart > .dmu-dropdown {
    --_dd-tx: 8px;
    --_dd-ty: 0px;
    --_dd-origin-x: right;
    --_dd-origin-y: center;
    --_dd-item-tx: 6px;
    --_dd-item-ty: 0px;
}

/* ─── Staggered item reveal ─── */

@keyframes dmu-dropdown-item-in {
    from {
        opacity: 0;
        transform: translate(var(--_dd-item-tx, 0px), var(--_dd-item-ty, -6px));
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.dmu-dropdown.dmu-animate > .dmu-dropdown-item,
.dmu-dropdown.dmu-animate > .dmu-dropdown-divider {
    opacity: 0;
    animation: dmu-dropdown-item-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--dmu-item-i, 0) * 0.04s + 0.06s);
}

.dmu-dropdown>li {
    list-style: none;
}

.dmu-dropdown>ul,
.dmu-dropdown>ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ─── Item ─── */

.dmu-dropdown-item {
    margin: 3px 0;
    list-style: none;
}

/* ─── Link / Button ─── */

.dmu-dropdown-link {
    display: block;
    width: 100%;
    text-decoration: none !important;
    border-radius: 0.8rem;
    padding: 0.5rem 0.6rem;
    color: var(--dmu-dropdown-text) !important;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;

    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

/* ─── Inner layout ─── */

.dmu-dropdown-link-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ─── Icon wrapper ─── */

.dmu-dropdown-icon-wrapper {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dmu-dropdown-icon-wrapper .icon {
    opacity: 0.9;
}

/* ─── Icon & label colors ─── */

.dmu-dropdown-icon-wrapper i,
.dmu-dropdown-icon-wrapper svg {
    color: var(--dmu-dropdown-text);
}

.dmu-dropdown-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dmu-dropdown-text);
}

/* ─── Hover & Focus ─── */

.dmu-dropdown-link:hover,
.dmu-dropdown-link:focus {
    background-color: var(--dmu-dropdown-hover-bg) !important;
    color: var(--dmu-dropdown-hover-text) !important;
}

.dmu-dropdown-link:hover .icon,
.dmu-dropdown-link:focus .icon {
    opacity: 1;
}

.dmu-dropdown-link:hover .dmu-dropdown-icon-wrapper i,
.dmu-dropdown-link:hover .dmu-dropdown-icon-wrapper svg,
.dmu-dropdown-link:focus .dmu-dropdown-icon-wrapper i,
.dmu-dropdown-link:focus .dmu-dropdown-icon-wrapper svg {
    color: var(--dmu-dropdown-hover-text);
}

.dmu-dropdown-link:hover .dmu-dropdown-label,
.dmu-dropdown-link:focus .dmu-dropdown-label {
    color: var(--dmu-dropdown-hover-text);
}

/* ─── Active state ─── */

.dmu-dropdown-link.active {
    background-color: var(--dmu-dropdown-hover-bg) !important;
    color: var(--dmu-dropdown-active-text) !important;
}

/* ─── Disabled state ─── */

.dmu-dropdown-link.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ─── Destructive variant ───
   Applied via Bootstrap's .text-danger on a .dmu-dropdown-link. The base
   .dmu-dropdown-link rule sets color with !important, so we need higher
   specificity (the double-class .dmu-dropdown-link.text-danger) plus
   !important to beat it. Also recolors the label and icon, which have
   their own color rules, and keeps the danger color on hover/focus with
   a red-tinted background tint for affordance. Uses the project's own
   --danger / --danger-rgb tokens (defined per theme in styles.css) — not
   Bootstrap's --bs-danger-*, which aren't bundled in this project's
   Bootstrap. */
.dmu-dropdown-link.text-danger,
.dmu-dropdown-link.text-danger:hover,
.dmu-dropdown-link.text-danger:focus,
.dmu-dropdown-link.text-danger .dmu-dropdown-label,
.dmu-dropdown-link.text-danger:hover .dmu-dropdown-label,
.dmu-dropdown-link.text-danger:focus .dmu-dropdown-label,
.dmu-dropdown-link.text-danger .dmu-dropdown-icon-wrapper i,
.dmu-dropdown-link.text-danger .dmu-dropdown-icon-wrapper svg,
.dmu-dropdown-link.text-danger:hover .dmu-dropdown-icon-wrapper i,
.dmu-dropdown-link.text-danger:focus .dmu-dropdown-icon-wrapper i,
.dmu-dropdown-link.text-danger:hover .dmu-dropdown-icon-wrapper svg,
.dmu-dropdown-link.text-danger:focus .dmu-dropdown-icon-wrapper svg {
    color: var(--danger) !important;
}

.dmu-dropdown-link.text-danger:hover,
.dmu-dropdown-link.text-danger:focus {
    background-color: rgba(var(--danger-rgb), 0.12) !important;
}

/* ─── Check icon (active row) ─── */

.dmu-dropdown-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
}

/* ─── User header row ───
   Clickable variant used at the top of the profile dropdown. Mirrors
   .dmu-dropdown-link's hover treatment but lays out an avatar + name/role
   stack + trailing chevron instead of icon + label. */

.dmu-dropdown-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 8px;
    padding: 0.5rem 0.6rem;
    border-radius: 0.8rem;
    color: var(--dmu-dropdown-text) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.dmu-dropdown-user-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dmu-dropdown-user-text p {
    color: var(--dmu-dropdown-text);
}

.dmu-dropdown-user-chevron {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.dmu-dropdown-user:hover,
.dmu-dropdown-user:focus {
    background-color: var(--dmu-dropdown-hover-bg) !important;
    color: var(--dmu-dropdown-hover-text) !important;
}

.dmu-dropdown-user:hover .dmu-dropdown-user-text p,
.dmu-dropdown-user:focus .dmu-dropdown-user-text p {
    color: var(--dmu-dropdown-hover-text);
}

.dmu-dropdown-user:hover .dmu-dropdown-user-chevron,
.dmu-dropdown-user:focus .dmu-dropdown-user-chevron {
    transform: translateX(2px);
    opacity: 1;
}

/* ─── Section header ─── */

.dmu-dropdown-section-header {
    padding: 0.4rem 0.6rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dmu-sidebar-muted, var(--bs-secondary));
    list-style: none;
}

/* ─── Divider ───
   Spans corner-to-corner of the panel. The negative horizontal margin
   exactly cancels --dmu-dropdown-padding (defined on the .dmu-dropdown
   panel), so the 1px line reaches the panel's inner border on both
   sides whether the divider is a direct child of .dmu-dropdown or sits
   inside a <ul class="list-unstyled"> wrapper (the wrapper has its own
   `.dmu-dropdown > ul { padding: 0 }` reset, so its inner edge equals
   the panel's content edge). Tying the math to the panel's CSS variable
   means the two values can't drift apart.

   The `display: block`, `border: 0`, `padding: 0`, and explicit
   `box-sizing` are belt-and-braces against site-wide rules that target
   bare <li>/<hr> elements (e.g. memo/kb-content typography rules) —
   if a future rule adds a border or padding to <li>, the line itself
   stays exactly 1px tall instead of becoming a thicker band. */
.dmu-dropdown-divider {
    display: block;
    box-sizing: border-box;
    height: 1px;
    border: 0;
    padding: 0;
    background: var(--dmu-dropdown-border);
    margin: 8px calc(var(--dmu-dropdown-padding, 0.5rem) * -1);
    list-style: none;
}

/* Flush variant: same edge-to-edge horizontal bleed, but zero vertical
   margin so the divider sits flush against the items above and below. */
.dmu-dropdown-divider-flush {
    margin: 0 calc(var(--dmu-dropdown-padding, 0.5rem) * -1) !important;
}

/* ─── Submenu ───
   Nested .dmu-dropdown that opens to the side of an item on hover (desktop)
   or tap (touch). Markup:

     <li class="dmu-dropdown-item dmu-dropdown-submenu">
       <button class="dmu-dropdown-link"> ... main label ...
         <i data-lucide="chevron-right" class="dmu-dropdown-submenu-chevron"></i>
       </button>
       <ul class="dmu-dropdown dmu-dropdown-submenu-panel">
         <li class="dmu-dropdown-item">...</li>
       </ul>
     </li>

   The panel is positioned relative to its <li>, not the panel container, so we
   set position: relative on the submenu item. Behaviour (hover/click/flip) is
   handled in js/modules/ui/dropdown-submenu.js. */

.dmu-dropdown-submenu {
    position: relative;
}

.dmu-dropdown-submenu-chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
    color: var(--dmu-dropdown-text);
    transition: opacity 0.15s ease, color 0.15s ease;
}

.dmu-dropdown-submenu > .dmu-dropdown-link:hover .dmu-dropdown-submenu-chevron,
.dmu-dropdown-submenu > .dmu-dropdown-link:focus .dmu-dropdown-submenu-chevron,
.dmu-dropdown-submenu.is-open > .dmu-dropdown-link .dmu-dropdown-submenu-chevron {
    opacity: 1;
    color: var(--dmu-dropdown-hover-text);
}

/* The panel itself. Higher specificity (.dmu-dropdown.dmu-dropdown-submenu-panel)
   so we override the base .dmu-dropdown's animation/opacity defaults — submenus
   don't need the staggered open animation, just show/hide. */
.dmu-dropdown.dmu-dropdown-submenu-panel {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 4px;
    min-width: 180px;
    max-height: none;
    overflow-y: visible;
    display: none;

    /* Skip the bouncy open animation used by Bootstrap-driven dropdowns. */
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition: none;
}

.dmu-dropdown-submenu.is-open > .dmu-dropdown.dmu-dropdown-submenu-panel {
    display: block;
}

/* JS adds .dmu-flip-left when the submenu would overflow the viewport on the
   right — render it on the left of the trigger instead. */
.dmu-dropdown.dmu-dropdown-submenu-panel.dmu-flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}

/* Parent .dmu-dropdown sets overflow-y: auto and (per CSS spec) implicit
   overflow-x: auto. That clips a submenu rendered to its right. While a submenu
   is open we let the panel overflow visibly. */
.dmu-dropdown.dmu-has-open-submenu {
    overflow: visible !important;
}