ul#menubar {
    width: inherit;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    margin: 0;
    padding: 0;
}

/* filedialog on menu item */
ul#menubar div#wrapper {
    position: relative;
}

div#wrapper > input#fileDialog {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding-left: 0 !important;
    padding-right: 0.3em !important;
    padding-top: 0.3em !important;
    opacity: 0;
}

ul > li a {
    max-width: 100%;
    color: inherit;
    text-decoration: inherit;
}

li div {
    white-space: nowrap;
    overflow: hidden;
}

/* Horizontal menubar */
.ui-menu.ui-widget {
    background: var(--bg-surface);
    border: none;
}

.ui-menu .ui-menu-item-wrapper {
    color: var(--text-primary);
    padding: 0.3em 0.6em;
}

.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

#menubar > li {
    display: inline-block;
    background: var(--bg-surface);
}

#menubar > li > div.ui-menu-item-wrapper {
    padding: 0.4em 0.8em;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
}

#menubar > li > div.ui-menu-item-wrapper:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#menubar > li > div.ui-menu-item-wrapper.ui-state-active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#menubar > li > ul {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#menubar > li > ul > li {
    display: block;
}

#menubar > li > ul > li > div.ui-menu-item-wrapper {
    padding: 0.3em 1.5em;
    color: var(--text-primary);
    border: none;
}

#menubar > li > ul > li > div.ui-menu-item-wrapper.ui-state-active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* sub-menu dropdown */
#menubar > li > ul > li > ul {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#menubar li div:not(.icon) {
    padding-left: 0.3em !important;
}

#menubar li div.icon {
    padding-left: 1.5em;
}

#menubar li div#wrapper div.icon {
    padding-left: 1.25em;
}

menuitem {
    text-align: left;
}

/* Caret icons — inline arrows instead of external images */
#menubar > li > div > span.ui-icon-caret-1-e {
    display: none;
}

#menubar > li > div.ui-menu-item-wrapper:not(.ui-menu-item-group)::after {
    content: "";
    display: none;
}

/* Top-level items with submenus get a down arrow */
#menubar > li:has(ul) > div.ui-menu-item-wrapper::after {
    opacity: 0.5;
    font-size: 10px;
    margin-left: 4px;
}

/* Sub-menu items with submenus get a right arrow */
#menubar ul li:has(ul) > div.ui-menu-item-wrapper::after {
    opacity: 0.5;
    font-size: 10px;
    float: right;
    margin-right: -0.8em;
}

/* Checkbox menu items */
#menubar li div.icon input.toggle {
    margin-left: 0.3em;
    vertical-align: middle;
}

#menubar li div.icon label {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Menubar icon sprites */
#menubar .ui-icon {
    background-image: url("ui-icons_ffffff_256x240.png") !important;
}

#menubar .ui-state-active .ui-icon {
    background-image: url("ui-icons_cc0000_256x240.png") !important;
}

/* Separator line in menus */
#menubar .ui-menu-item-divider {
    border-color: var(--border);
}