/* App UI for editing menu button states (active/highlight/hidden).
   Dots are an admin feature and can be toggled via settings (localStorage). */

/* Avoid "flash" where all menu/action buttons render briefly before JS applies state.
  Start with buttons "off" and let menu_state_ui.js reveal them after state load.
  Includes a JS timeout fallback so the UI won't stay hidden if state fails to load. */
body.ma-menu-state-pending #leftMenu a.btn,
body.ma-menu-state-pending .ma-page-actions a.btn,
body.ma-menu-state-pending .ma-page-actions button.btn {
  opacity: 0;
  pointer-events: none;
}

.ma-menu-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ma-menu-row > a.btn,
.ma-menu-row > button.btn {
  flex: 1 1 auto;
}

.ma-state-dots {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
}

.ma-state-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(var(--bs-body-color-rgb), .35);
}

.ma-state-dot[aria-pressed="true"] {
  border-width: 2px;
  border-color: rgba(var(--bs-body-color-rgb), .85);
}

.ma-leftnav-hidden {
  display: none !important;
}

/* Hidden means not visible for normal users.
   In admin mode (dots visible), keep hidden rows visible but dimmed so they can be edited. */
body:not(.ma-hide-menu-dots) .ma-menu-row.ma-leftnav-hidden {
  display: flex !important;
  opacity: .25;
}

body:not(.ma-hide-menu-dots) .ma-menu-row.ma-leftnav-hidden > a.btn,
body:not(.ma-hide-menu-dots) .ma-menu-row.ma-leftnav-hidden > button.btn {
  pointer-events: none;
}

body:not(.ma-hide-menu-dots) .ma-actions-host .ma-menu-row.ma-leftnav-hidden {
  display: inline-flex !important;
}

/* Admin toggle: hide dots everywhere */
body.ma-hide-menu-dots .ma-state-dots {
  display: none !important;
}

/* Right actions: match left menu button sizing (full-width). */
.ma-actions-host{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ma-actions-host .ma-menu-row{
  display: flex;
  width: 180px;
}

.ma-actions-host .ma-menu-row > a.btn,
.ma-actions-host .ma-menu-row > button.btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .5rem;
  line-height: 1.5;
  min-height: 33px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575.98px){
  .ma-actions-host .ma-menu-row{
    width: 100%;
  }
}