/**
 * Design Menu Styles
 * The design menu (#ds-design-menu-id.ds-sidebar, the sidebar over the canvas on the left)
 * in the look of the item menu (newItemMenu.css). Always loaded after the main stylesheet,
 * whose .ds-sidebar rules still place and slide the menu; the markup is in sites/EDITOR.js,
 * the content is built by Editor.js.
 */

/* ============================================
   Sidebar, toggle strip and maximize button
   ============================================ */
#ds-design-menu-id.ds-sidebar {
    color: #ffffff;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
}

#ds-design-menu-id.ds-sidebar .ds-sidebar__toggle-button {
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%);
    color: #ffffff;
    box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* reads top to bottom like the ADD strip of the item menu */
#ds-design-menu-id.ds-sidebar .ds-sidebar__toggle-button-text {
    transform: rotate(90deg);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#ds-design-menu-id.ds-sidebar .ds-sidebar__maximize-button {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

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

/* maximized like the add menu: the only side panel, the add panel is hidden until it is restored
   (setOldDesignMenuMaximized in Editor.js); a maximized add menu hides the canvas panel with this menu */
.editor-layout--new.has-maximized-design .editor-layout__panel--add {
    display: none;
}

/* the dark panel of the item menu instead of the grey frosted glass */
#ds-design-menu-id.ds-sidebar .ds-sidebar__content {
    background: linear-gradient(135deg, rgba(15, 25, 35, 0.97) 0%, rgba(20, 35, 50, 0.95) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    color: #ffffff;
}

/* ============================================
   Tabs
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-tabs {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#ds-design-menu-id.ds-sidebar .ds-tabs__navigation {
    flex-shrink: 0;
    gap: 4px;
    padding: 8px 12px;
    align-items: center;
    background: rgb(10, 35, 45);
    border-bottom: 1px solid rgb(0, 130, 165);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2; /* the KIT dropdown lies over the content */
}

#ds-design-menu-id.ds-sidebar .ds-tabs__navigation > .separator,
#ds-design-menu-id.ds-sidebar .ds-tabs > .divider {
    display: none;
}

#ds-design-menu-id.ds-sidebar .ds-tabs__navigation-item {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgb(180, 180, 180);
    /* over the inline var(--primaryColor) Editor.js gives the tabs that are not shown */
    background: rgb(25, 40, 55) !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#ds-design-menu-id.ds-sidebar .ds-tabs__navigation-item:hover {
    color: #ffffff;
    background: rgb(0, 100, 130) !important;
}

/* the shown tab, Editor.js marks it with an inline black background */
#ds-design-menu-id.ds-sidebar .ds-tabs__navigation-item[style*="background-color: black"] {
    color: #ffffff;
    background: linear-gradient(135deg, rgb(0, 140, 175) 0%, rgb(0, 110, 145) 100%) !important;
    box-shadow: 0 2px 12px rgba(0, 163, 204, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* KIT / KICKS / TOMS ... dropdown */
#ds-design-menu-id.ds-sidebar #ds-drumkitDesignGroupNav-id {
    width: auto;
    min-width: 72px;
    justify-content: center;
}

#ds-design-menu-id.ds-sidebar #ds-drumkitDesignGroupNav-id sub {
    margin-left: 4px;
    font-size: 10px;
    vertical-align: baseline;
    opacity: 0.7;
}

#ds-design-menu-id.ds-sidebar #designGroups-menu .menu--submenu {
    min-width: 120px;
    padding: 4px;
    gap: 2px;
    background: rgb(15, 30, 42);
    border: 1px solid rgb(0, 130, 165);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#ds-design-menu-id.ds-sidebar #designGroups-menu .menu--submenu .ds-tabs__navigation-item {
    width: 100%;
    background: transparent !important;
    /* not "all": a transition of visibility kept the texts showing for a moment after their panel was gone */
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#ds-design-menu-id.ds-sidebar #designGroups-menu .menu--submenu .ds-tabs__navigation-item:hover {
    background: rgb(0, 100, 130) !important;
}

#ds-design-menu-id.ds-sidebar #designGroups-menu .menu--submenu .ds-tabs__navigation-item[style*="background-color: black"] {
    background: linear-gradient(135deg, rgb(0, 140, 175) 0%, rgb(0, 110, 145) 100%) !important;
}

/* tab content */
#ds-design-menu-id.ds-sidebar .ds-tabs__content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #00a3cc transparent;
}

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

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

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

/* ============================================
   Sections (ds-accordion) like the item menu categories
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-accordion {
    margin-bottom: 20px;
    background: rgba(40, 55, 75, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

/* a hidden category leaves its empty wrapper behind, see newItemMenu.css */
#ds-design-menu-id.ds-sidebar .ds-accordion:not(:has(> .ds-accordion__accordion-item:not([style*="display: none"]))) {
    display: none;
}

#ds-design-menu-id.ds-sidebar .ds-accordion:last-child {
    margin-bottom: 0;
}

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

#ds-design-menu-id.ds-sidebar .ds-accordion-item__title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(30, 45, 60, 0.8);
}

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

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content {
    padding: 12px 14px;
    background: rgba(40, 55, 75, 0.4);
}

/* the settings inside a part (TEXTURE, ROTATION, COLOR ...): a smaller title; the boxes stack
   the same fills as the item menu, so the inner levels get lighter like there */
#ds-design-menu-id.ds-sidebar .ds-accordion-item__content .ds-accordion-item__content .ds-accordion-item__title {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.85);
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content .ds-accordion-item__content .ds-accordion-item__title::before {
    height: 12px;
    width: 3px;
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content .ds-accordion-item__content .ds-accordion-item__content {
    padding: 10px 12px;
}

/* the empty spacer divs between the parts (KIT DESIGN > SHELL OUTSIDE | SHELL INSIDE ...) */
#ds-design-menu-id.ds-sidebar .ds-accordion-item__content > div:not([class]):empty {
    height: 0 !important;
}

/* inherited (greyed) parts on the dark background */
#ds-design-menu-id.ds-sidebar .ds-accordion-item__content.greyedOutKategorie,
#ds-design-menu-id.ds-sidebar .ds-accordion-item__title.greyedOutKategorie,
#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-bar.greyedOutKategorie {
    background-color: rgba(0, 0, 0, 0.18);
}

/* ============================================
   Filter bars (Full / Gradient ..., Strong / Soft), no brand filters
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px 0;
    background: transparent;
}

/* a bar with only brand filters (hidden in this menu) would leave an empty gap */
#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-bar:empty,
#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-bar:not([data-dm-source-filter]):not(:has(.ndm-filter-btn[data-item-list]:not([data-item-list=""]):not([data-item-list="undefined"]))) {
    display: none;
}

#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-btn {
    padding: 5px 10px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-btn:hover {
    color: #ffffff;
    background: rgba(0, 163, 204, 0.25);
    border-color: rgba(0, 163, 204, 0.5);
}

#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-btn--active {
    color: #ffffff;
    background: rgba(0, 163, 204, 0.3);
    border-color: #00a3cc;
}

/* ============================================
   Option rows: current choice, scrolling cards, "+" button
   ============================================ */
#ds-design-menu-id.ds-sidebar .UIDesignMenu__horiCon {
    gap: 10px;
    margin-right: 0;
}

/* the current choice on the left of a row */
#ds-design-menu-id.ds-sidebar .UIDesignMenu__horiCon > [id^="iconCon|"],
#ds-design-menu-id.ds-sidebar .ds-currentTexture > [id^="iconCon|"] {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#ds-design-menu-id.ds-sidebar .UICardTable {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

#ds-design-menu-id.ds-sidebar .UICardTable__Table {
    gap: 8px;
    padding-left: 4px;
    padding-right: 4px;
}

/* textures and other asset cards: no frame, the space between them separates them;
   only the applied one gets a frame (below) */
#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu .asset__preview {
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu:hover {
    background: rgba(255, 255, 255, 0.05);
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu:hover .asset__preview {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* the applied texture: a cyan frame and tint instead of the outline glow */
#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu.designMenu__active {
    outline: none !important;
    box-shadow: none !important;
    border-color: #00a3cc;
    background: rgba(0, 163, 204, 0.18);
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu.designMenu__active > .stockiCard-title {
    color: #ffffff;
}

/* colors stay round */
#ds-design-menu-id.ds-sidebar .designMenu__color {
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* the fades are gradients, a rim would read as a white edge of the fade */
#ds-design-menu-id.ds-sidebar .designMenu__color[style*="gradient"] {
    border: none;
}

#ds-design-menu-id.ds-sidebar .designMenu__color:hover {
    border-color: #00a3cc;
    transform: scale(1.08);
}

/* the picked option */
#ds-design-menu-id.ds-sidebar .designMenu__active {
    outline: 2px solid #00a3cc !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 163, 204, 0.25), 0 4px 12px rgba(0, 163, 204, 0.4) !important;
}

/* "+" adds own assets, like the grid button of the new design menu */
#ds-design-menu-id.ds-sidebar .assToDes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px !important;
    height: 30px;
    margin-left: 0;
    padding: 0;
    bottom: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #00a3cc;
    background: rgba(0, 163, 204, 0.1);
    border: 1px solid rgba(0, 163, 204, 0.6);
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

#ds-design-menu-id.ds-sidebar .assToDes:hover {
    color: #ffffff;
    background: #00a3cc;
}

/* custom scrollbar of the card rows */
/* a row that does not scroll keeps the room of its scrollbar (hidden inline by keepScrollbarsVisible),
   so the rows do not get lower when MY ASSETS or a filter shows only a few cards */
#ds-design-menu-id.ds-sidebar .ds-scroll-row[style*="display: none"] {
    display: flex !important;
    visibility: hidden;
}

#ds-design-menu-id.ds-sidebar .ds-scroll-arrow {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

#ds-design-menu-id.ds-sidebar .ds-scroll-arrow:hover {
    color: #ffffff;
    background: rgba(0, 163, 204, 0.4);
}

#ds-design-menu-id.ds-sidebar .ds-scroll-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    background-clip: content-box;
}

#ds-design-menu-id.ds-sidebar .ds-scroll-thumb {
    background: rgba(0, 163, 204, 0.75);
}

#ds-design-menu-id.ds-sidebar .ds-scroll-thumb:hover,
#ds-design-menu-id.ds-sidebar .ds-scroll-thumb--dragging {
    background: #00d4ff;
}

/* ============================================
   Sliders and number fields (DesignMenuSlider), like the new design menu
   ============================================ */
/* a slider row: the number field, then the slider over the rest of the width */
#ds-design-menu-id.ds-sidebar .ds-accordion-item__content > span {
    display: flex;
    align-items: center;
    width: 100%;
}

/* behind the "auto" button of the repeat sliders */
#ds-design-menu-id.ds-sidebar .ds-accordion-item__content > button.UIButton + span {
    display: inline-flex;
    width: calc(100% - 80px);
    vertical-align: middle;
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content > span > input[type="range"] {
    flex: 1 1 auto;
    width: auto !important; /* DesignMenuSlider sets 70% inline */
    min-width: 60px;
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content input[type="number"] {
    box-sizing: border-box;
    height: 30px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

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

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    margin: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #00a3cc;
    box-shadow: 0 0 0 3px rgba(0, 163, 204, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease;
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #00a3cc;
    cursor: pointer;
}

#ds-design-menu-id.ds-sidebar .ds-accordion-item__content input[type="range"]::-moz-range-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* ============================================
   Buttons
   ============================================ */
/* reset helpers, save design, the "auto" of the repeat sliders */
#ds-design-menu-id.ds-sidebar button.UIButton:not(.UIButton_FilterToggle) {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#ds-design-menu-id.ds-sidebar button.UIButton:not(.UIButton_FilterToggle):hover {
    background: rgba(0, 163, 204, 0.3);
    border-color: rgba(0, 163, 204, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#ds-design-menu-id.ds-sidebar button.UIButton.UIButton--active {
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%);
    border-color: #00d4f5;
    box-shadow: none;
}

#ds-design-menu-id.ds-sidebar button.UIButton.UIButton--danger {
    background: rgba(200, 50, 50, 0.18);
    border-color: rgba(200, 50, 50, 0.45);
}

#ds-design-menu-id.ds-sidebar button.UIButton.UIButton--danger:hover {
    background: rgba(200, 50, 50, 0.6);
    border-color: rgba(220, 70, 70, 0.9);
}

/* the "auto" in front of the repeat slider */
#ds-design-menu-id.ds-sidebar .ds-accordion-item__content > button.UIButton:not(.UIButton_FilterToggle) {
    margin: 0 8px 0 0;
    padding: 6px 10px;
    vertical-align: middle;
}

/* the sync buttons in a title (sync inside / sync reso): small pills like the inherit buttons of the item menu */
#ds-design-menu-id.ds-sidebar .UIButton_DesignSyncer {
    margin-left: 6px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

#ds-design-menu-id.ds-sidebar .UIButton_DesignSyncer.UIButton_FilterToggle--active {
    color: #ffffff;
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%);
    border-color: #00d4f5;
}

/* the inherit buttons of the drum groups and the selected drum */
#ds-design-menu-id.ds-sidebar .inheritButton {
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    cursor: pointer;
}

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

/* FORCE SNARES and co on a KIT kat: only the groups that set their own value (Editor.js refreshForceGroupButtons) */
#ds-design-menu-id.ds-sidebar .forceGroupButtons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

#ds-design-menu-id.ds-sidebar .forceGroupButton {
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffcf7a;
    background: rgba(255, 170, 40, 0.12);
    border: 1px solid rgba(255, 170, 40, 0.45);
    border-radius: 16px;
    cursor: pointer;
}

#ds-design-menu-id.ds-sidebar .forceGroupButton:hover {
    color: #ffffff;
    background: rgba(255, 170, 40, 0.35);
    border-color: rgba(255, 170, 40, 0.8);
}

/* TYPE buttons with plain text (lugs, ...) */
#ds-design-menu-id.ds-sidebar button:not([class]),
#ds-design-menu-id.ds-sidebar button.designMenu__active:not(.UIButton):not(.ds-itemCard) {
    min-height: 30px;
    margin: 2px 4px 2px 0;
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}

#ds-design-menu-id.ds-sidebar button:not([class]):hover {
    background: rgba(0, 163, 204, 0.3);
    border-color: rgba(0, 163, 204, 0.6);
}

#ds-design-menu-id.ds-sidebar button.designMenu__active:not(.UIButton):not(.ds-itemCard),
#ds-design-menu-id.ds-sidebar button.designMenu__active:not(.UIButton):not(.ds-itemCard):hover {
    background: linear-gradient(180deg, #00b8d4 0%, #0091a8 100%);
    border-color: #00d4f5;
    box-shadow: 0 2px 8px rgba(0, 163, 204, 0.35) !important;
}

/* TYPE buttons with a picture (the hoop types): the item cards of the item menu */
#ds-design-menu-id.ds-sidebar .ds-itemCard {
    width: 88px;
    margin: 0 6px 6px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    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-design-menu-id.ds-sidebar .ds-itemCard:hover {
    transform: translateY(-2px);
    border-color: #00a3cc;
    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-design-menu-id.ds-sidebar .ds-itemCard .ds-itemCard__picture {
    background: #ffffff; /* the item icons are rendered on a light background */
}

#ds-design-menu-id.ds-sidebar .ds-itemCard .ds-itemCard__name {
    padding: 6px 6px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#ds-design-menu-id.ds-sidebar .ds-itemCard.designMenu__active {
    border-color: #00a3cc;
    background: rgba(0, 163, 204, 0.18);
}

/* ============================================
   GENERAL tab
   ============================================ */
/* the headings (DESIGN CARDS, RESET HELPERS, MY DESIGNS) are text nodes of this box */
#ds-design-menu-id.ds-sidebar #generaldesignbereich_id > .ds-accordion__accordion-item {
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;
    color: #00a3cc;
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .ds-design-menu__button-group {
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 163, 204, 0.25);
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .ds-design-menu__button-group button.UIButton {
    min-width: 0;
    width: 100%;
    text-align: left;
    background: rgba(0, 163, 204, 0.12);
    border-color: rgba(0, 163, 204, 0.35);
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .ds-design-menu__button-group button.UIButton:hover {
    background: rgba(0, 163, 204, 0.3);
    border-color: rgba(0, 163, 204, 0.6);
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .ds-design-menu__button-group button.UIButton--danger {
    background: rgba(200, 50, 50, 0.18);
    border-color: rgba(200, 50, 50, 0.45);
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .ds-design-menu__button-group button.UIButton--danger:hover {
    background: rgba(200, 50, 50, 0.6);
    border-color: rgba(220, 70, 70, 0.9);
}

/* the texts and saved design cards under MY DESIGNS keep a normal weight */
#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .my-designs-section button,
#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .my-designs-list {
    letter-spacing: normal;
    line-height: normal;
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .my-designs-empty {
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

/* no saved designs (or logged out, loading, an error): a box of its own instead of a loose grey line */
#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .my-designs-list > .my-designs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 14px;
    border: 1px dashed rgba(0, 163, 204, 0.35);
    border-radius: 8px;
    background: rgba(0, 163, 204, 0.06);
    font-size: 12px;
    text-align: center;
    text-transform: none;
}

#ds-design-menu-id.ds-sidebar #generaldesignbereich_id .my-designs-list > .my-designs-empty::before {
    content: "";
    width: 28px;
    height: 28px;
    opacity: 0.35;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

/* ============================================
   DEFAULT / MY ASSETS of the texture rows (Editor.js showTextureSource), no brands yet
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-bar[data-dm-source-filter] .ndm-filter-btn[data-filter="DS"],
#ds-design-menu-id.ds-sidebar .ds-accordion .ndm-filter-bar[data-dm-source-filter] .ndm-filter-btn[data-filter="userAsset"] {
    display: inline-block;
}

#ds-design-menu-id.ds-sidebar .UICardTable__Table[data-dm-source="DS"] > :not([data-dm-default]),
#ds-design-menu-id.ds-sidebar .UICardTable__Table[data-dm-source="userAsset"] > [data-dm-default] {
    display: none !important;
}

#ds-design-menu-id.ds-sidebar .UICardTable__Table[data-dm-source="userAsset"]:not(:has(> :not([data-dm-default])))::before {
    content: "No own assets yet, add one with +";
    align-self: center;
    padding: 0 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

/* ============================================
   Fold and Open all / Close all, like the item menu (ItemMenuTools.js)
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-itemMenuTools {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(22, 33, 46, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

#ds-design-menu-id.ds-sidebar .ds-itemMenuTools__button:hover {
    background: rgba(0, 163, 204, 0.15);
    border-color: #00a3cc;
}

#ds-design-menu-id.ds-sidebar .ds-tabs__content .ds-accordion-item__title {
    cursor: pointer;
}

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

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

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

#ds-design-menu-id.ds-sidebar .ds-tabs__content .is-folded > .ds-accordion-item__content,
#ds-design-menu-id.ds-sidebar .ds-tabs__content .is-folded > .ndm-filter-bar {
    display: none !important;
}

/* ============================================
   Texture names, like the item cards of the add menu: picture, name below
   ============================================ */
/* the applied texture (Editor.js setTexturePreviewName) */
#ds-design-menu-id.ds-sidebar .ds-currentTexture {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 76px;
}

#ds-design-menu-id.ds-sidebar .ds-currentTexture > img {
    margin: 0 !important; /* the builder sets a right margin inline */
}

#ds-design-menu-id.ds-sidebar .ds-currentTexture__name,
#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu > .stockiCard-title {
    display: -webkit-box !important; /* the card title is hidden by sizeToMini */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.85);
}

#ds-design-menu-id.ds-sidebar .ds-currentTexture__name {
    font-size: 11px;
    color: #ffffff;
}

/* the texture cards: the square picture with the name under it */
#ds-design-menu-id.ds-sidebar .UICardTable__Table:has(> .UICard_Asset--inDesignMenu) {
    height: auto;
    min-height: 68px;
    align-items: flex-start;
    padding-top: 4px;
    padding-bottom: 4px;
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu.UICard_Asset--mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 64px;
    min-width: 64px;
    height: auto;
    padding: 3px 3px 5px;
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu.UICard_Asset--mini > .asset__preview {
    order: 0;
    width: 56px;
    height: 56px;
}

#ds-design-menu-id.ds-sidebar .UICard_Asset--inDesignMenu.UICard_Asset--mini > .stockiCard-title {
    order: 1;
    flex: none;
    min-height: 2.5em; /* room for two lines, so all cards of a row are equally high */
}

/* ============================================
   A kategorie that is just a slider (ROTATION, REPEAT X, OFFSET Y, GLOSS ...) is one line:
   name, AUTO, value, slider. No box, no fold (Editor.js isSliderRow)
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-accordion:has(> .ds-accordion__accordion-item > .ds-accordion-item__content > span > input[type="range"]) {
    margin-bottom: 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* a boxed category after a slider line gets room above it too */
#ds-design-menu-id.ds-sidebar .ds-accordion:has(> .ds-accordion__accordion-item > .ds-accordion-item__content > span > input[type="range"])
    + .ds-accordion:not(:has(> .ds-accordion__accordion-item > .ds-accordion-item__content > span > input[type="range"])) {
    margin-top: 18px;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 4px;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__title {
    flex: 0 0 auto;
    min-width: 92px; /* the names line up, a title with an inherit button grows */
    padding: 0 !important;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.75);
    background: transparent !important;
    cursor: default;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__title::before,
#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__title::after {
    display: none;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    background: transparent;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content > span,
#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content > button.UIButton + span {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content > button.UIButton:not(.UIButton_FilterToggle) {
    margin: 0;
    padding: 5px 9px;
}

#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content input[type="number"] {
    width: 62px !important; /* DesignMenuSlider sets 77px inline */
    height: 26px;
    margin-right: 8px !important;
}

/* the hidden native scrollbar row and spacers do not take room in a slider line */
#ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content > br {
    display: none;
}

/* ============================================
   TEXTURE SETTINGS: ROTATION, REPEAT and OFFSET of a texture together (Editor.js groupTextureSettings)
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-textureSettings > .ds-accordion-item__content {
    padding: 6px 12px 8px;
}

/* inside the TEXTURE section, below the texture cards */
#ds-design-menu-id.ds-sidebar .ds-accordion:has(> .ds-textureSettings) {
    margin-top: 12px;
    margin-bottom: 0;
}

/* gone when the menu hides every row in it (style, or hiddenInMenu in the SELECTED tab) */
#ds-design-menu-id.ds-sidebar .ds-accordion:has(> .ds-textureSettings):not(:has(> .ds-textureSettings > .ds-accordion-item__content > .ds-accordion > .ds-accordion__accordion-item:not([style*="display: none"]):not(.hiddenInMenu):not(.hidden))) {
    display: none;
}

/* ============================================
   Very narrow menu (240px or less): no indent per level, like the item menu (newItemMenu.css),
   nested sections lose their frame and side padding and sit flush, one flat list.
   It asks the width of the menu, not of the window
   ============================================ */
#ds-design-menu-id.ds-sidebar .ds-tabs__content {
    container-type: inline-size;
}

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

    #ds-design-menu-id.ds-sidebar .ds-accordion-item__content > .ds-accordion {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    #ds-design-menu-id.ds-sidebar .ds-accordion-item__content .ds-accordion-item__content .ds-accordion-item__content {
        padding-left: 8px;
        padding-right: 8px;
    }

    #ds-design-menu-id.ds-sidebar .ds-accordion-item__title {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* a slider line keeps its slider: a narrower name column and value field */
    #ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) {
        gap: 6px;
    }

    #ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__title {
        min-width: 74px;
        letter-spacing: 0.5px;
    }

    #ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content {
        gap: 6px;
    }

    #ds-design-menu-id.ds-sidebar .ds-accordion__accordion-item:has(> .ds-accordion-item__content > span > input[type="range"]) > .ds-accordion-item__content input[type="number"] {
        width: 48px !important;
        margin-right: 6px !important;
    }
}

@media screen and (max-width: 799px) {
    #ds-design-menu-id.ds-sidebar .ds-tabs__content {
        padding: 8px 0;
    }

    /* the strip next to the menu lets the clicks through to the canvas, a shadow over its whole
       height showed as a see-through seam there: only the menu itself casts one (drumstructor_main.css) */
    #ds-design-menu-id.ds-sidebar {
        box-shadow: none;
    }
}