/**
 * New Item Menu Styles
 * The Add menu (#ds-add-menu-id) as a panel of the new editor layout.
 * Always loaded, the Add menu is a panel of the panel layout (needs newPanelLayout.css)
 */

/* ============================================
   ADD MENU (Right Sidebar) - Panel Layout Override
   These styles apply within the new panel-based layout
   ============================================ */
#ds-add-menu-id {
    /* Remove fixed positioning - now uses panel layout */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    background: transparent;
    color: #ffffff;
}

/* Add Menu Toggle Button - now part of panel */
#ds-add-menu-id .panel-sidebar__toggle,
#ds-add-menu-id #add-menu-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    width: 44px;
    min-width: 44px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.2);
}

#ds-add-menu-id .panel-sidebar__toggle:hover,
#ds-add-menu-id #add-menu-toggle:hover {
    background: linear-gradient(180deg, #00d4f5 0%, #00a3cc 100%);
}

#ds-add-menu-id .panel-sidebar__toggle-text {
    display: block;
    transform: rotate(90deg);
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Add Menu Content Area */
#ds-add-menu-id .panel-sidebar__content {
    flex: 1;
    display: none; /* Hidden by default */
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    background: linear-gradient(135deg, rgba(15, 25, 35, 0.97) 0%, rgba(20, 35, 50, 0.95) 100%);
}

/* Show content when panel is open */
.panel--open #ds-add-menu-id .panel-sidebar__content {
    display: flex;
}

/* Add Menu Tabs Container */
#ds-add-menu-id .ds-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
}

/* Add Menu Tabs Navigation (if shown) */
#ds-add-menu-id .ds-tabs__navigation {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: rgb(10, 35, 45);
    border-bottom: 1px solid rgb(0, 130, 165);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    align-items: center;
}

#ds-add-menu-id .ds-tabs__navigation-item {
    position: relative;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(180, 180, 180);
    cursor: pointer;
    border: none;
    background: rgb(25, 40, 55);
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

#ds-add-menu-id .ds-tabs__navigation-item:hover {
    color: rgb(255, 255, 255);
    background: rgb(0, 100, 130);
    transform: translateY(-1px);
}

/* Add Menu Tabs Content Area */
#ds-add-menu-id .ds-tabs__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: #00a3cc transparent;
    height: auto;
}

#ds-add-menu-id .ds-tabs__content::-webkit-scrollbar {
    width: 6px;
}

#ds-add-menu-id .ds-tabs__content::-webkit-scrollbar-track {
    background: transparent;
}

#ds-add-menu-id .ds-tabs__content::-webkit-scrollbar-thumb {
    background: #00a3cc;
    border-radius: 3px;
}

/* Add Menu - Divider */
#ds-add-menu-id .divider {
    height: 1px;
    background: rgba(0, 163, 204, 0.25);
    margin: 0;
}

/* Add Menu - Accordion Items */
#ds-add-menu-id .ds-accordion {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ds-add-menu-id .ds-accordion__item {
    margin-bottom: 12px;
    background: rgba(40, 55, 75, 0.6);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .ds-accordion__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(30, 45, 60, 0.8);
}

#ds-add-menu-id .ds-accordion__header:hover {
    background: rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .ds-accordion__title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#ds-add-menu-id .ds-accordion__icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
    margin-left: auto;
    flex-shrink: 0;
}

#ds-add-menu-id .ds-accordion__item--open .ds-accordion__icon {
    transform: rotate(180deg);
}

#ds-add-menu-id .ds-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#ds-add-menu-id .ds-accordion__item--open .ds-accordion__body {
    max-height: 5000px;
    overflow: visible;
}

#ds-add-menu-id .ds-accordion__content {
    padding: 12px 16px;
    padding-top: 0;
}

/* Add Menu - Card Tables */
#ds-add-menu-id .UICardTable {
    background: transparent;
    border: none;
}

#ds-add-menu-id .UICardTable__Header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(30, 45, 60, 0.8);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .UICardTable__Header:hover {
    background: rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .UICardTable__Title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#ds-add-menu-id .UICardTable__Title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #00d4ff 0%, #00a3cc 100%);
    border-radius: 2px;
}

#ds-add-menu-id .UICardTable__Toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease;
}

#ds-add-menu-id .UICardTable--collapsed .UICardTable__Toggle {
    transform: rotate(-90deg);
}

#ds-add-menu-id .UICardTable__Table {
    background: rgba(40, 55, 75, 0.4);
    border-radius: 0 0 8px 8px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#ds-add-menu-id .UICardTable--collapsed .UICardTable__Table {
    display: none;
}

/* Add Menu - Cards/Items */
#ds-add-menu-id .UICard {
    width: 70px;
    min-width: 70px;
    height: 70px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .UICard:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#ds-add-menu-id .UICard--active,
#ds-add-menu-id .UICard.selected {
    border-color: #00a3cc;
    box-shadow: 0 0 0 2px #00a3cc, 0 4px 12px rgba(0, 163, 204, 0.4);
}

#ds-add-menu-id .UICard__Image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ds-add-menu-id .UICard__Label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    color: white;
    font-size: 9px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Add Menu - Legacy card styling (for existing cards) */
#ds-add-menu-id .card {
    margin-bottom: 12px;
    background: rgba(40, 55, 75, 0.6);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(30, 45, 60, 0.8);
}

#ds-add-menu-id .card__header:hover {
    background: rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .card__title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#ds-add-menu-id .card__title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #00d4ff 0%, #00a3cc 100%);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}

#ds-add-menu-id .card__body {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#ds-add-menu-id .card__body--collapsed {
    display: none;
}

/* Add Menu - Thumbnail grid items */
#ds-add-menu-id .addMenuThumb,
#ds-add-menu-id [class*="addMenuThumb"] {
    width: 70px;
    min-width: 70px;
    height: 70px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .addMenuThumb:hover,
#ds-add-menu-id [class*="addMenuThumb"]:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#ds-add-menu-id .addMenuThumb.selected,
#ds-add-menu-id [class*="addMenuThumb"].selected {
    border-color: #00a3cc;
    box-shadow: 0 0 0 2px #00a3cc, 0 4px 12px rgba(0, 163, 204, 0.4);
}

#ds-add-menu-id .addMenuThumb img,
#ds-add-menu-id [class*="addMenuThumb"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Menu - Category sections with images */
#ds-add-menu-id .addMenuKat {
    margin-bottom: 16px;
    background: rgba(40, 55, 75, 0.6);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .addMenuKatHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(30, 45, 60, 0.8);
}

#ds-add-menu-id .addMenuKatHeader:hover {
    background: rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .addMenuKatHeader::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #00d4ff 0%, #00a3cc 100%);
    border-radius: 2px;
}

#ds-add-menu-id .addMenuKatTitle {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 1;
}

#ds-add-menu-id .addMenuKatBody {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Add Menu - Image/Item containers */
#ds-add-menu-id .menuThumb,
#ds-add-menu-id [class*="menuThumb"],
#ds-add-menu-id .item-thumb,
#ds-add-menu-id [class*="item-thumb"] {
    width: 70px;
    min-width: 70px;
    height: 70px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .menuThumb:hover,
#ds-add-menu-id [class*="menuThumb"]:hover,
#ds-add-menu-id .item-thumb:hover,
#ds-add-menu-id [class*="item-thumb"]:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#ds-add-menu-id .menuThumb.selected,
#ds-add-menu-id [class*="menuThumb"].selected,
#ds-add-menu-id .item-thumb.selected,
#ds-add-menu-id [class*="item-thumb"].selected,
#ds-add-menu-id .menuThumb.active,
#ds-add-menu-id [class*="menuThumb"].active,
#ds-add-menu-id .item-thumb.active,
#ds-add-menu-id [class*="item-thumb"].active {
    border-color: #00a3cc;
    box-shadow: 0 0 0 2px #00a3cc, 0 4px 12px rgba(0, 163, 204, 0.4);
}

#ds-add-menu-id .menuThumb img,
#ds-add-menu-id [class*="menuThumb"] img,
#ds-add-menu-id .item-thumb img,
#ds-add-menu-id [class*="item-thumb"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Menu - Header section */
#ds-add-menu-id .addMenuHeader {
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(10, 15, 25, 0.98) 0%, rgba(15, 25, 35, 0.95) 100%);
    border-bottom: 1px solid rgba(0, 163, 204, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#ds-add-menu-id .addMenuTitle {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

#ds-add-menu-id .addMenuTitle::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #00d4ff 0%, #00a3cc 100%);
    border-radius: 2px;
}

/* Add Menu - Filter/Search styling */
#ds-add-menu-id input[type="text"],
#ds-add-menu-id input[type="search"] {
    width: 100%;
    padding: 10px 14px;
    padding-left: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

#ds-add-menu-id input[type="text"]:focus,
#ds-add-menu-id input[type="search"]:focus {
    border-color: #00a3cc;
    background: rgba(255, 255, 255, 0.1);
}

#ds-add-menu-id input[type="text"]::placeholder,
#ds-add-menu-id input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Add Menu - Button styling */
#ds-add-menu-id button:not(.ds-sidebar__toggle-button) {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#ds-add-menu-id button:not(.ds-sidebar__toggle-button):hover {
    background: #00a3cc;
    border-color: #00a3cc;
}

#ds-add-menu-id button:not(.ds-sidebar__toggle-button).active,
#ds-add-menu-id button:not(.ds-sidebar__toggle-button).selected {
    background: #00a3cc;
    border-color: #00a3cc;
}

/* Add Menu - Round cymbal thumbnails */
#ds-add-menu-id [data-kat="cct"] .addMenuThumb,
#ds-add-menu-id [data-kat="rct"] .addMenuThumb,
#ds-add-menu-id [data-kat="hct"] .addMenuThumb,
#ds-add-menu-id [data-kat="sct"] .addMenuThumb,
#ds-add-menu-id [data-kat="yct"] .addMenuThumb,
#ds-add-menu-id [data-kat="gct"] .addMenuThumb {
    border-radius: 50%;
}

/* Add Menu - Empty state */
#ds-add-menu-id .emptyState,
#ds-add-menu-id .empty-state {
    text-align: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Add Menu - Loading state */
#ds-add-menu-id .loading {
    text-align: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.7);
}

/* Add Menu - Info text */
#ds-add-menu-id .infoText,
#ds-add-menu-id .info-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    background: rgba(0, 163, 204, 0.1);
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 3px solid #00a3cc;
}
/* Add Menu - ds-accordion styling (legacy accordion structure) */
#ds-add-menu-id .ds-accordion {
    margin-bottom: 16px;
    background: rgba(40, 55, 75, 0.6);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* A hidden category leaves its wrapper behind, whose border and margin show as
   empty separator lines (or dots inside a wrapping section), so hide it too */
#ds-add-menu-id .ds-accordion:not(:has(> .ds-accordion__accordion-item:not([style*="display: none"]))) {
    display: none;
}

#ds-add-menu-id .ds-accordion__accordion-item {
    background: transparent;
}

#ds-add-menu-id .ds-accordion-item__title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(30, 45, 60, 0.8);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}

#ds-add-menu-id .ds-accordion-item__title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #00d4ff 0%, #00a3cc 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

#ds-add-menu-id .ds-accordion-item__title:hover {
    background: rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .ds-accordion-item__content {
    padding: 12px 16px;
    background: rgba(40, 55, 75, 0.4);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

/* A very narrow menu (240px or less) does not indent the categories: every level costs 17px on
   each side, so nested categories (SCENE ITEMS > DRUM RUG) lose their frame
   and side padding and all sit flush at the same left edge, one flat list.
   The menu width is set by dragging the panel, so this asks the menu, not the window. */
#ds-add-menu-id #ds-items-id,
#ds-add-menu-id #ds-replacers-id {
    container-type: inline-size;
}

@container (max-width: 240px) {
    #ds-add-menu-id .ds-accordion-item__content:has(> .ds-accordion) {
        padding-left: 0;
        padding-right: 0;
    }

    #ds-add-menu-id .ds-accordion-item__content > .ds-accordion {
        width: 100%;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    #ds-add-menu-id .ds-accordion-item__content {
        padding-left: 8px;
        padding-right: 8px;
        justify-content: flex-start;
    }
}

/* Add Menu - Inherit buttons */
#ds-add-menu-id .inheritButton {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: auto;
}

#ds-add-menu-id .inheritButton:hover {
    background: rgba(0, 163, 204, 0.3);
    border-color: rgba(0, 163, 204, 0.5);
    color: #ffffff;
}

#ds-add-menu-id .inheritButton.inherited {
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%);
    border-color: #00d4f5;
    color: #ffffff;
}

/* Add Menu - Markers/Labels */
#ds-add-menu-id .marker,
#ds-add-menu-id [class*="marker"] {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#ds-add-menu-id .marker:first-child,
#ds-add-menu-id [class*="marker"]:first-child {
    margin-top: 0;
}

/* Add Menu - User drums section */
#ds-add-menu-id #dS-userDrums {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 163, 204, 0.25);
}

/* Add Menu - Filter tags/pills */
#ds-add-menu-id .filterTag,
#ds-add-menu-id [class*="filterTag"],
#ds-add-menu-id .filter-tag {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#ds-add-menu-id .filterTag:hover,
#ds-add-menu-id [class*="filterTag"]:hover,
#ds-add-menu-id .filter-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

#ds-add-menu-id .filterTag.active,
#ds-add-menu-id .filterTag--active,
#ds-add-menu-id [class*="filterTag"].active,
#ds-add-menu-id .filter-tag.active {
    background: #00a3cc;
    border-color: #00a3cc;
    color: white;
}

/* Add Menu - br tags (reduce space) */
#ds-add-menu-id br {
    display: none;
}

/* Add Menu - General button refinement */
#ds-add-menu-id .ds-accordion-item__content > button,
#ds-add-menu-id .ds-accordion-item__content > span > button {
    width: auto;
    min-width: 60px;
    height: auto;
    min-height: 32px;
    margin: 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#ds-add-menu-id .ds-accordion-item__content > button:hover,
#ds-add-menu-id .ds-accordion-item__content > span > button:hover {
    background: rgba(0, 163, 204, 0.3);
    border-color: rgba(0, 163, 204, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Add Menu - Input fields within accordion */
#ds-add-menu-id .ds-accordion-item__content input[type="number"] {
    width: 70px !important;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#ds-add-menu-id .ds-accordion-item__content input[type="number"]:focus {
    border-color: #00a3cc;
    background: rgba(255, 255, 255, 0.1);
}

/* Add Menu - span labels for inputs */
#ds-add-menu-id .ds-accordion-item__content > div > span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

/* Add Menu - buildItemBut specific styling */
#ds-add-menu-id .buildItemBut {
    display: inline-block;
    width: auto !important;
    margin-top: 0 !important;
    padding: 4px 12px !important;
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ds-add-menu-id .buildItemBut:hover {
    background: linear-gradient(180deg, #00d4f5 0%, #00a3cc 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 163, 204, 0.4);
}

/* RISER SIZE: OPEN / CLOSED, the one the selected riser has is lit (Editor.js updateAddMenu) */
#ds-add-menu-id button[data-riser-sides] {
    min-width: 90px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#ds-add-menu-id button.ds-riserSides--on {
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%) !important;
    border-color: #00d4f5 !important;
    color: #ffffff !important;
}

/* Add Menu - Separator styling */
#ds-add-menu-id .separator {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Add Menu - greyedOutKategorie class */
#ds-add-menu-id .greyedOutKategorie {
    opacity: 0.4;
    filter: grayscale(60%);
    pointer-events: none;
}

/* Add Menu - Asset cards */
#ds-add-menu-id .UICard_Asset {
    width: 65px;
    min-width: 65px;
    height: 65px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

#ds-add-menu-id .UICard_Asset:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#ds-add-menu-id .UICard_Asset.UICard--selected {
    border-color: #00a3cc;
    box-shadow: 0 0 0 2px #00a3cc, 0 4px 12px rgba(0, 163, 204, 0.4);
}

#ds-add-menu-id .UICard_Asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Menu - Selected thumbnail styling (unified) */
#ds-add-menu-id [class*="Thumb"].selected,
#ds-add-menu-id [class*="thumb"].selected,
#ds-add-menu-id [class*="Thumb"].active,
#ds-add-menu-id [class*="thumb"].active {
    border: 2px solid #00a3cc !important;
    box-shadow: 0 0 0 2px #00a3cc, 0 4px 12px rgba(0, 163, 204, 0.4) !important;
}

/* Add Menu - Config buttons (createConfigBut generated spans with images) */
#ds-add-menu-id .ds-accordion-item__content > span[style*="height"] {
    height: 70px !important;
    width: 90px !important;
    margin-right: 6px !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
    position: relative !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

#ds-add-menu-id .ds-accordion-item__content > span[style*="height"]:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

#ds-add-menu-id .ds-accordion-item__content > span[style*="height"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Add Menu - Saved drum cards (MY DRUMS, real products): picture with the name below */
#ds-add-menu-id .ds-accordion-item__content:has(> .ds-configCard) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

#ds-add-menu-id .ds-configCard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#ds-add-menu-id .ds-configCard:hover {
    transform: translateY(-2px);
    border-color: var(--ndm-primary-color);
    background: rgba(0, 163, 204, 0.1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 163, 204, 0.4);
}

#ds-add-menu-id .ds-configCard:active {
    transform: translateY(0);
}

#ds-add-menu-id .ds-configCard__picture {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.25) 100%);
}

#ds-add-menu-id .ds-configCard__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.3s ease;
}

#ds-add-menu-id .ds-configCard:hover .ds-configCard__img {
    transform: scale(1.06);
}

#ds-add-menu-id .ds-configCard__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 7px 9px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ndm-text-color);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow-wrap: anywhere;
}

#ds-add-menu-id .ds-configCard:hover .ds-configCard__name {
    color: #ffffff;
}

/* Add Menu - Item cards (icon buttons and FLOOR pictures): rectangular picture, name below */
#ds-add-menu-id .ds-accordion-item__content .ds-itemCard {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 96px;
    width: 96px;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: var(--ndm-text-color);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: top;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#ds-add-menu-id .ds-accordion-item__content .ds-itemCard:hover {
    transform: translateY(-2px);
    border-color: var(--ndm-primary-color);
    background: rgba(0, 163, 204, 0.1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 163, 204, 0.4);
}

#ds-add-menu-id .ds-accordion-item__content .ds-itemCard:active {
    transform: translateY(0);
}

#ds-add-menu-id .ds-accordion-item__content .ds-itemCard .ds-itemCard__picture {
    display: block;
    aspect-ratio: 1 / 1; /* the item icons are square */
    margin: 0;
    overflow: hidden;
    background: #ffffff; /* the item icons are rendered on a light background */
}

#ds-add-menu-id .ds-accordion-item__content .ds-itemCard .ds-itemCard__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
    pointer-events: none;
    transition: transform 0.3s ease;
}

#ds-add-menu-id .ds-accordion-item__content .ds-itemCard:hover .ds-itemCard__img {
    transform: scale(1.06);
}

/* READY SNARES: the product shots of the snare projects are 3:2 on a plain grey (170), the
   square card showed them cut at the sides. The whole drum with a little air, on the same grey:
   3% at the sides, a 6:5 picture keeps about as much above and below. */
#ds-add-menu-id #dS-realSnares .ds-itemCard .ds-itemCard__picture {
    aspect-ratio: 6 / 5;
    background: rgb(170, 170, 170);
}

#ds-add-menu-id #dS-realSnares .ds-itemCard .ds-itemCard__img {
    object-fit: contain;
    padding: 0 3%;
    box-sizing: border-box;
}

#ds-add-menu-id .ds-accordion-item__content .ds-itemCard .ds-itemCard__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    padding: 6px 6px 7px;
    color: var(--ndm-text-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow-wrap: anywhere;
}

/* Add Menu - REAL CYMBALS: the size a row of cymbal cards starts with */
#ds-add-menu-id .ds-accordion-item__content .ds-realCymbals__size {
    flex: 0 0 100%;
    margin: 6px 0 -2px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ndm-primary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#ds-add-menu-id .ds-accordion-item__content .ds-realCymbals__size:first-child {
    margin-top: 0;
}

/* the series names are long, so they get the two lines the card has room for */
#ds-add-menu-id .ds-accordion-item__content .ds-realCymbals__card .ds-itemCard__name {
    white-space: normal;
    /* the space below as margin, the clip ends with the second line instead of showing a sliver of the third */
    padding-bottom: 0;
    margin-bottom: 7px;
}

/* Add Menu - MY SNARES when nothing is saved */
#ds-add-menu-id .ds-configEmpty {
    width: 100%;
    padding: 14px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--ndm-text-muted);
    font-size: 12px;
    text-align: center;
}

/* Add Menu - Replacer/Item menu items header */
#ds-add-menu-id #ds-replacers-id,
#ds-add-menu-id #ds-items-id {
    padding-top: 0;
}

/* Add Menu - Scrollbar styling */
#ds-add-menu-id *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#ds-add-menu-id *::-webkit-scrollbar-track {
    background: transparent;
}

#ds-add-menu-id *::-webkit-scrollbar-thumb {
    background: #00a3cc;
    border-radius: 3px;
}

#ds-add-menu-id *::-webkit-scrollbar-thumb:hover {
    background: #00d4f5;
}

/* Mobile: the closed Add menu is only a short tab in the middle of the right edge, over the canvas,
   so the canvas and the action bar on top of it get the full width */
@media screen and (max-width: 799px) {
    .editor-layout--new .editor-layout__panel--add:not(.panel--open) {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        pointer-events: none;
    }

    #ds-add-menu-id .panel-sidebar__toggleWrap {
        display: flex;
        align-items: center;
    }

    #ds-add-menu-id .panel-sidebar__toggle,
    #ds-add-menu-id #add-menu-toggle {
        height: 120px;
        border-radius: 8px 0 0 8px;
        pointer-events: auto;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
    }
}

/* Add Menu - item menu search, fold and open/close all (editor/ItemMenuTools.js) */
#ds-add-menu-id .ds-itemMenuTools {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(22, 33, 46, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#ds-add-menu-id .ds-itemMenuTools__searchBox {
    position: relative;
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
}

#ds-add-menu-id .ds-itemMenuTools__search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 30px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 13px;
    outline: none;
}

#ds-add-menu-id .ds-itemMenuTools__search:focus {
    border-color: var(--ndm-primary-color);
}

/* the browser's own cross is hardly visible on the dark field, ours replaces it */
#ds-add-menu-id .ds-itemMenuTools__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* button. in front: the add menu's rule for every button (padding, corners, letter spacing) is as specific and would win */
#ds-add-menu-id button.ds-itemMenuTools__clear {
    position: absolute;
    top: 50%;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    cursor: pointer;
}

#ds-add-menu-id button.ds-itemMenuTools__clear:hover {
    background: var(--ndm-primary-color);
    border-color: transparent;
}

#ds-add-menu-id button.ds-itemMenuTools__clear[hidden] {
    display: none;
}

#ds-add-menu-id .ds-itemMenuTools__button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

#ds-add-menu-id .ds-itemMenuTools__button:hover {
    border-color: var(--ndm-primary-color);
    background: rgba(0, 163, 204, 0.15);
}

#ds-add-menu-id .ds-itemMenuTools__status {
    flex: 0 0 100%;
    color: #ffb4b6;
    font-size: 12px;
}

#ds-add-menu-id .ds-itemMenuTools__status:empty {
    display: none;
}

/* a fold arrow on every category title of the item menu */
#ds-add-menu-id #ds-items-id .ds-accordion-item__title::after {
    content: "\25BE";
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

#ds-add-menu-id #ds-items-id .is-folded > .ds-accordion-item__title::after {
    transform: rotate(-90deg);
}

#ds-add-menu-id #ds-items-id .is-folded > .ds-accordion-item__content,
#ds-add-menu-id #ds-items-id .is-folded > .ndm-filter-bar {
    display: none;
}

/* while searching every category shows what is found, folded or not */
#ds-add-menu-id #ds-items-id.is-searching .is-folded > .ds-accordion-item__content {
    display: flex;
}

#ds-add-menu-id #ds-items-id.is-searching .is-folded > .ndm-filter-bar {
    display: flex;
}

#ds-add-menu-id #ds-items-id .is-search-hidden {
    display: none !important;
}

/* the maximize button in the toggle strip: the darker look of the design menu's, over the generic button rule above */
#ds-add-menu-id button.panel-sidebar__maximize-btn {
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
}

#ds-add-menu-id button.panel-sidebar__maximize-btn:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.7);
}

/* maximized, the add menu grows from its own side, the right edge, to the left
   (newPanelLayout.css pins a maximized panel with left: 0, so it grew from the left) */
.editor-layout--new .editor-layout__panel--add.editor-layout__panel--maximized {
    left: auto !important;
    right: 0 !important;
}

/* FACE THRONE, the toggle at the top of the add menu (installFaceThroneToggle in Editor.js) */
#ds-add-menu-id .ds-addMenuTop {
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px 0;
}

#ds-add-menu-id .ds-faceThrone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#ds-add-menu-id .ds-faceThrone img {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* lit like an active button of the action bar */
#ds-add-menu-id .ds-faceThrone.is-on {
    background-color: var(--primaryColor, #00a3cc);
    border-color: rgba(0, 173, 214, 0.5);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 173, 214, 0.25);
}

#ds-add-menu-id .ds-faceThrone.is-on:hover {
    background-color: var(--primaryColorBright, #00b8e6);
}

/*
  The shell size tables (Editor.js): ten depth buttons a row. In a narrow add
  panel (35% of a window under ~1300px, or the panel made small) the icon and
  the depth did not fit a button and the next one's icon lay over this one's
  depth, a click on "7" added the 7.5. The icons go when the panel is narrow,
  not only on a narrow screen (the 768px rule in drumstructor_main.css), and
  the depth gets the whole button. The content is a flex child that grows to
  the panel's width, so it can be the size container.
*/
#ds-add-menu-id .panel-sidebar__content {
    container-type: inline-size;
}

@container (max-width: 440px) {
    #ds-add-menu-id .shell-size-table button svg {
        display: none;
    }
    #ds-add-menu-id .shell-size-table button {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}