/* ──────────────────────────────────────────────────────────────────────────
   menu-manager.css
   Styles for the Menu Manager Ops page + MenuItemEditDialog + PinToMenu
   button chrome. Loaded globally from index.html — used only by the
   Menu Manager page and the pin button which may appear anywhere.

   --theme-* tokens only. Zero hex outside comments.
   ────────────────────────────────────────────────────────────────────── */

/* ── Menu Manager page ────────────────────────────────────────────────── */

.menu-mgr-bucket {
    margin-top: 1.5rem;
    background-color: var(--theme-background-raised);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    padding: 0.75rem 1rem;
}

.menu-mgr-bucket-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.5rem 0;
    font-size: var(--theme-font-size-base);
    color: var(--theme-text-emphasis);
}

.menu-mgr-bucket-count {
    margin-left: auto;
    padding: 0 0.5rem;
    border-radius: var(--theme-radius);
    background-color: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    font-size: var(--theme-font-size-xs);
    font-weight: 400;
}

.menu-mgr-empty {
    color: var(--theme-text-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

.menu-mgr-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-mgr-list.readonly .menu-mgr-row {
    opacity: 0.85;
}

.menu-mgr-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--theme-background);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    transition: var(--theme-transition);
}

.menu-mgr-row:hover {
    background-color: var(--theme-background-hover);
}

.menu-mgr-row-icon {
    width: 2rem;
    text-align: center;
    color: var(--theme-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.menu-mgr-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-mgr-row-name {
    font-weight: 600;
    color: var(--theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-mgr-row-meta {
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.menu-mgr-type-badge {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--theme-radius);
    background-color: var(--theme-primary-muted);
    color: var(--theme-primary);
    font-weight: 500;
}

.menu-mgr-row-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}

/* ── Edit dialog icon preview ─────────────────────────────────────────── */

.menu-mgr-icon-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-mgr-icon-preview {
    font-size: 1.25rem;
    color: var(--theme-primary);
    width: 1.75rem;
    text-align: center;
    flex-shrink: 0;
}

/* ── PinToMenu button ─────────────────────────────────────────────────── */

.wf-pin-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.wf-pin-pinned {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background-color: var(--theme-primary-muted);
    color: var(--theme-primary);
    border-radius: var(--theme-radius);
    font-size: var(--theme-font-size-sm);
}

.wf-pin-error {
    font-size: var(--theme-font-size-xs);
    color: var(--theme-danger);
    margin-left: 0.25rem;
}

/* ── Page header (reused pattern) ─────────────────────────────────────── */

.wf-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.wf-page-header h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--theme-text-emphasis);
}

.wf-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* ── Picker affordances (Phase 2c.4 polish) ──────────────────────────── */

.menu-mgr-picker-loading {
    display: flex;
    align-items: center;
    color: var(--theme-text-muted);
    font-style: italic;
    background-color: var(--theme-background-subtle);
}

.menu-mgr-picker-raw {
    margin-top: 0.5rem;
}

.menu-mgr-picker-raw summary {
    cursor: pointer;
    color: var(--theme-text-muted);
    padding: 0.25rem 0;
}

.menu-mgr-picker-raw summary:hover {
    color: var(--theme-primary);
}

/* ── Wizard data-source sub-header (Phase 2c.4 wizard polish) ─────────── */

.ef-wizard-ds-sub-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
    font-weight: 600;
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ── Drag-reorder (Phase 2c.6) ──────────────────────────────────────── */

.menu-mgr-row[draggable="true"] {
    cursor: grab;
}

.menu-mgr-row[draggable="true"]:active {
    cursor: grabbing;
}

.menu-mgr-row-grip {
    width: 1.25rem;
    min-height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted);
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
}

.menu-mgr-row:hover .menu-mgr-row-grip {
    color: var(--theme-text);
}

.menu-mgr-tree.readonly .menu-mgr-row-grip {
    visibility: hidden;
}

/* ── Tree view (Menu Manager revamp) ────────────────────────────────── */

.menu-mgr-tree {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-mgr-tree.readonly .menu-mgr-row {
    opacity: 0.85;
}

.menu-mgr-node {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-mgr-node.dragging .menu-mgr-row {
    opacity: 0.4;
}

/* Headers stand out a bit — subtle emphasis so the tree shape reads
   at a glance without shouting. */
.menu-mgr-row.row-header {
    background-color: var(--theme-background-subtle);
    border-color: var(--theme-border);
}

.menu-mgr-row.row-header .menu-mgr-row-name {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Indented child strip — left connector line visually links children to
   their parent. The 1rem left margin matches grip+icon width so children
   align under the parent's label. */
.menu-mgr-children {
    margin-left: 1.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--theme-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-mgr-node.depth-1 .menu-mgr-row {
    background-color: var(--theme-background);
}

.menu-mgr-empty-header {
    padding: 0.375rem 0.75rem;
    color: var(--theme-text-muted);
    font-size: var(--theme-font-size-xs);
    font-style: italic;
    background-color: var(--theme-background-subtle);
    border: 1px dashed var(--theme-border-subtle);
    border-radius: var(--theme-radius);
}

/* ── Chevron (expand/collapse) ──────────────────────────────────────── */

.menu-mgr-chevron {
    border: 0;
    background: transparent;
    color: var(--theme-text-muted);
    padding: 0;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}

.menu-mgr-chevron:hover { color: var(--theme-primary); }

.menu-mgr-chevron.expanded { transform: rotate(90deg); }

/* ── Drop indicators ────────────────────────────────────────────────── */
/* Three possible zones per row — visualized by an accent line above
   (before), an accent line below (after), or a ring around the whole
   row (into = nest as child). */

.menu-mgr-row.drag-over-before {
    box-shadow: 0 -3px 0 0 var(--theme-primary);
    border-top-color: var(--theme-primary);
}

.menu-mgr-row.drag-over-after {
    box-shadow: 0 3px 0 0 var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}

.menu-mgr-row.drag-over-into {
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
    background-color: var(--theme-primary-muted);
}

.menu-mgr-toplevel-drop {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
    color: var(--theme-text-muted);
    font-size: var(--theme-font-size-sm);
    background-color: var(--theme-background);
    border: 1px dashed var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    transition: var(--theme-transition);
}

.menu-mgr-toplevel-drop.active {
    color: var(--theme-primary);
    background-color: var(--theme-primary-muted);
    border-color: var(--theme-primary);
    border-style: solid;
}

/* ── Chips (row metadata badges) ────────────────────────────────────── */

.menu-mgr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.0625rem 0.375rem;
    background-color: var(--theme-background-subtle);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    font-size: var(--theme-font-size-xs);
    font-weight: 500;
    line-height: 1.25;
}

.menu-mgr-chip-channel   { border-color: var(--theme-primary); color: var(--theme-primary); }
.menu-mgr-chip-home      { border-color: var(--theme-accent, var(--theme-primary)); color: var(--theme-accent, var(--theme-primary)); }
.menu-mgr-chip-hidden    { border-color: var(--theme-warning, var(--theme-text-muted)); color: var(--theme-warning, var(--theme-text-muted)); }
.menu-mgr-chip-api       { border-color: var(--theme-success, var(--theme-text-muted)); color: var(--theme-success, var(--theme-text-muted)); }

.menu-mgr-type-badge.menu-mgr-type-header {
    background-color: var(--theme-accent-muted, var(--theme-primary-muted));
    color: var(--theme-accent, var(--theme-primary));
}

/* ── Quick-add header inline row ────────────────────────────────────── */

.menu-mgr-quick-row {
    margin-bottom: 0.5rem;
}

.menu-mgr-quick-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
}

.menu-mgr-quick-form {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background-color: var(--theme-background);
    border: 1px solid var(--theme-primary);
    border-radius: var(--theme-radius);
    animation: menu-mgr-quick-in 0.15s ease-out;
}

.menu-mgr-quick-form input {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-mgr-quick-icon {
    color: var(--theme-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

@keyframes menu-mgr-quick-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Add-child button tints with the primary hue so it reads as an
   additive action instead of sitting visually next to Edit/Delete. */

.menu-mgr-add-child {
    color: var(--theme-success, var(--theme-primary));
}

.menu-mgr-add-child:hover {
    color: var(--theme-primary);
}

/* ── Icon picker (Phase 2c.6) ──────────────────────────────────────── */

.menu-mgr-icon-browse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

.icon-picker-modal {
    max-width: 44rem;
    width: 92vw;
}

.icon-picker-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 22rem;
}

.icon-picker-search {
    position: relative;
    display: flex;
    align-items: center;
}

.icon-picker-search .bi-search {
    position: absolute;
    left: 0.5rem;
    color: var(--theme-text-muted);
}

.icon-picker-search input {
    padding-left: 1.75rem;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.375rem;
    overflow-y: auto;
    max-height: 26rem;
    padding: 0.25rem;
}

.icon-picker-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    background-color: var(--theme-background);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    color: var(--theme-text);
    cursor: pointer;
    transition: var(--theme-transition);
}

.icon-picker-cell i {
    font-size: 1.375rem;
    color: var(--theme-primary);
}

.icon-picker-cell:hover,
.icon-picker-cell.hovered {
    background-color: var(--theme-primary-muted);
    border-color: var(--theme-primary);
}

.icon-picker-cell-label {
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.icon-picker-cell:hover .icon-picker-cell-label {
    color: var(--theme-text);
}

.icon-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--theme-text-muted);
}

.icon-picker-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}