/* ─── Kebab (three-dot) action menu ─────────────────────────────────────────
   Usage in layout XML:

   <div id="KebabMenu" css="na-kebab-anchor" AppearanceHideWhenTrue="OperatorMode">
       <div class="dropdown">
           <button class="na-kebab-btn" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>&#8942;</button>
           <div class="dropdown-menu dropdown-menu-end na-kebab-dropdown">
               <button class="na-kebab-item" type="button">My action</button>
               <div class="na-kebab-divider"></div>
               <div class="na-kebab-danger-item">
                   <Action id="RequestDeleteEntityMessage, Nova.Global.Entities" prop-Outline="true" />
               </div>
           </div>
       </div>
   </div>

   Place na-kebab-anchor inside a position:relative parent.
   ─────────────────────────────────────────────────────────────────────────── */

.na-kebab-anchor {
    position: absolute;
    top: .75rem;
    right: 1rem;
    z-index: 10;
}

.na-kebab-btn {
    background: none;
    border: none;
    color: var(--cui-secondary-color, #6c757d);
    padding: .2rem .375rem;
    border-radius: .375rem;
    cursor: pointer;
    line-height: 1;
    font-size: 1.1rem;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
}

.na-kebab-btn:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--cui-body-color, #212529);
}

.na-kebab-dropdown {
    min-width: 11rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    border-radius: .5rem;
    padding: .375rem 0;
}

.na-kebab-item {
    display: block;
    width: 100%;
    font-size: .875rem;
    padding: .45rem 1rem;
    color: var(--cui-body-color, #212529);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.na-kebab-item:hover {
    background: var(--bs-dropdown-link-hover-bg, rgba(0, 0, 0, .04));
}

.na-kebab-divider {
    height: 0;
    margin: .375rem 0;
    border-top: 1px solid var(--bs-dropdown-divider-bg, rgba(0, 0, 0, .1));
}

/* Allow dropdown to escape overflow:hidden on collapsible cards */
.na-collapsible-card:has(.dropdown-menu.show) {
    overflow: visible;
}

/* Action item: wraps a framework <Action> element and renders it as a flat dropdown item.
   Use prop-Outline="true" on the Action so the icon inherits the text color. */
.na-kebab-action-item > * {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
}

.na-kebab-action-item .app-button {
    width: 100%;
    justify-content: flex-start;
    padding: .45rem 1rem;
    font-size: .875rem;
    color: var(--cui-body-color, #212529) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left;
}

.na-kebab-action-item .app-button:hover {
    background: var(--bs-dropdown-link-hover-bg, rgba(0, 0, 0, .04)) !important;
}

/* Danger item: wraps a framework <Action> element and forces danger styling */
.na-kebab-danger-item > * {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
}

.na-kebab-danger-item .app-button {
    width: 100%;
    justify-content: flex-start;
    padding: .45rem 1rem;
    font-size: .875rem;
    color: var(--bs-danger, #dc3545) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left;
}

.na-kebab-danger-item .app-button:hover {
    background: rgba(220, 53, 69, .06) !important;
}