.component-icon.container-item {
    background-image: url('../assets/images/slot.png');
}

.component-icon.container-item-picture {
    background-image: url('../assets/images/slot_pic.png');
}

.component-icon.progress-bar {
    background-image: url('../assets/images/progress_bar.png');
}

.component-icon.on_off-item {
    background-image: url('../assets/images/on_off.png');
}

.component-icon.pot {
    background-image: url('../assets/images/uninteractable_slot.png');
}

.component-icon.container-type {
    background-image: url('../assets/images/slot_pic.png');
}

.component-icon.dynamic-grid {
    background-image: url('../assets/images/slot.png');
    background-size: 16px 16px;
}

.component-icon.tab {
    background-image: url('../assets/images/tab.png');
}

.component-icon.button {
    background-image: url('../assets/images/button.png');
}

.component-icon.image {
    background-image: url('../assets/images/image.png');
}

.component-icon.label {
    background-image: url('../assets/images/label.png');
}

.component-icon.close-button {
    background-image: url('../assets/images/close_btn.png');
}

.component-icon {
    opacity: 0.5;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Nearest-neighbor scaling for Minecraft UI textures in editor/preview layout */
.editor-canvas .chest-panel,
.preview-canvas .chest-panel,
.editor-canvas .component-container .editor-component,
.editor-canvas .component-container .editor-component::after,
.editor-canvas .component-container .editor-component .button-embedded-image,
.editor-canvas .component-container .editor-component .custom-picture-content,
.editor-canvas .component-container .editor-component .custom-texture-content,
.editor-canvas .component-container .fake-scrollbar,
.editor-canvas .component-container .fake-scrollbar-thumb,
.editor-canvas .component-container .dynamic-grid-content,
.preview-canvas .component-container .preview-component,
.preview-canvas .component-container .preview-component::after,
.preview-canvas .component-container .preview-component .button-embedded-image,
.preview-canvas .component-container .preview-component .custom-picture-content,
.preview-canvas .component-container .preview-component .custom-texture-content,
.preview-canvas .component-container .fake-scrollbar,
.preview-canvas .component-container .fake-scrollbar-thumb,
.preview-canvas .component-container .dynamic-grid-content {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.component-icon:hover {
    opacity: 1;
}

.editor-component {
    position: absolute;
    cursor: move;
    outline: 1px dashed rgba(255, 255, 255, 0.25);
    background-color: rgba(100, 100, 100, 0.05);
}

.editor-component:hover {
    outline: 1px solid rgba(77, 157, 224, 0.6);
    background-color: rgba(77, 157, 224, 0.1);
}

.editor-component.selected {
    outline: 2px solid var(--mc-selection);
    background-color: rgba(77, 157, 224, 0.15);
}

.editor-component.selecting {
    outline: 2px dashed var(--mc-selection);
    background-color: rgba(77, 157, 224, 0.2);
}

.editor-component.container-item {

    outline: none;
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-item-slot-border);
}

.editor-component.container-item:hover,
.editor-component.container-item.selected {
    outline: 2px solid var(--mc-selection);
}

.editor-component.container-item.selecting {
    outline: 2px dashed var(--mc-selection);
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-selection);
}

.editor-component.container-item-with-picture {

    outline: none;
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-item-slot-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-component.container-item-with-picture:hover,
.editor-component.container-item-with-picture.selected {
    outline: 2px solid var(--mc-selection);
}

.editor-component.container-item {
    width: 18px;
    height: 18px;
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-item-slot-border);
}

.editor-component.container-item-with-picture {
    width: 18px;
    height: 18px;
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-item-slot-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-component.container-item-with-picture.selecting {
    outline: 2px dashed var(--mc-selection);
    border: 2px solid var(--mc-selection);
}

.editor-component.container-item-with-picture::after {
    content: "";
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.editor-component.container-item-with-picture[data-picture="textures/ui/book_ui"]::after {
    background-image: url('../assets/images/ui/book_ui.png');
}

.editor-component.container-item-with-picture[data-picture="textures/ui/shard_ui"]::after {
    background-image: url('../assets/images/ui/shard_ui.png');
}

.editor-component.container-item-with-picture[data-picture="textures/ui/potion_ui"]::after {
    background-image: url('../assets/images/ui/potion_ui.png');
}

.editor-component.container-item-with-picture[data-picture="textures/ui/dust_ui"]::after {
    background-image: url('../assets/images/ui/dust_ui.png');
}

.editor-component.container-item-with-picture.custom-picture::after,
.preview-component.container-item-with-picture.custom-picture::after {
    display: none;
}

.editor-component.container-item-with-picture .custom-picture-content,
.preview-component.container-item-with-picture .custom-picture-content {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.editor-component.progress-bar {
    width: 22px;
    height: 15px;
    background-image: url('../assets/images/ui/progress_bar/progress_bar.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.editor-component.progress-bar.selecting {
    outline: 2px dashed var(--mc-selection);
    box-shadow: 0 0 0 2px var(--mc-selection);
}

.editor-component.progress-bar[data-value="0"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar0.png');
}

.editor-component.progress-bar[data-value="1"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar1.png');
}

.editor-component.progress-bar[data-value="2"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar2.png');
}

.editor-component.progress-bar[data-value="3"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar3.png');
}

.editor-component.progress-bar[data-value="4"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar4.png');
}

.editor-component.progress-bar[data-value="5"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar5.png');
}

.editor-component.progress-bar[data-value="6"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar6.png');
}

.editor-component.progress-bar[data-value="7"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar7.png');
}

.editor-component.progress-bar[data-value="8"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar8.png');
}

.editor-component.progress-bar[data-value="9"] {
    background-image: url('../assets/images/ui/progress_bar/progress_bar9.png');
}

.editor-component.on_off-item {
    width: 16px;
    height: 14px;
    background-image: url('../assets/images/ui/on_off/on_off.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.editor-component.on_off-item.active {
    background-image: url('../assets/images/ui/on_off/on_off_active.png');
}

.editor-component.on_off-item.selecting {
    outline: 2px dashed var(--mc-selection);
    box-shadow: 0 0 0 2px var(--mc-selection);
}

.editor-component.pot {
    width: 26px;
    height: 30px;
    background-image: url('../assets/images/ui/pot.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.editor-component.pot::after {
    content: attr(data-count);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 1px black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
}

.editor-component.pot:not(.custom-texture) {
    width: 26px;
    height: 30px;
    background-image: url('../assets/images/ui/pot.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.editor-component.pot.custom-texture {
    width: 26px;
    height: 30px;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.preview-component.pot:not(.custom-texture) {
    width: 26px;
    height: 30px;
    background-image: url('../assets/images/ui/pot.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.preview-component.pot.custom-texture {
    width: 26px;
    height: 30px;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.editor-component.pot.custom-texture::after,
.preview-component.pot.custom-texture::after {
    display: none;
}

.editor-component.pot .custom-texture-content,
.preview-component.pot .custom-texture-content {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.editor-component.container-type {
    width: 18px;
    height: 18px;
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-item-slot-border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.editor-component.container-type::after {
    content: none;
}

.editor-component.container-type.selecting {
    outline: 2px dashed var(--mc-selection);
    border: 2px solid var(--mc-selection);
}

.editor-component.dynamic-grid {
    position: relative;
    outline: 1px dashed rgba(255, 255, 255, 0.25);
    background-color: rgba(100, 100, 100, 0.05);
}

.editor-component.dynamic-grid:hover {
    outline: 1px solid rgba(77, 157, 224, 0.6);
    background-color: rgba(77, 157, 224, 0.1);
}

.editor-component.dynamic-grid.selected {
    outline: 2px solid var(--mc-selection);
    background-color: rgba(77, 157, 224, 0.15);
}

.preview-component.dynamic-grid {
    position: relative;
}

.editor-component.tab-panel,
.preview-component.tab-panel {
    background-color: rgba(60, 60, 60, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
    overflow: hidden;
}

.editor-component.tab-panel.selected {
    outline: 2px solid var(--mc-selection);
}

.editor-component.tab-panel.selecting {
    outline: 2px dashed var(--mc-selection);
}

.tab-panel-bar {
    display: flex;
    align-items: stretch;
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
}

.tab-panel-button {
    color: #202020;
    background-color: #c6c6c6;
    border: 1px solid #373737;
    border-bottom-color: #8b8b8b;
    font-family: 'Minecraft', 'Inter', sans-serif;
    font-size: 10px;
    line-height: 1;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tab-panel-button.active {
    background-color: #ffffff;
    border-bottom-color: #ffffff;
}

.tab-panel-page {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.editor-component .scroll-panel-wrapper {
    background: transparent;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.preview-component .scroll-panel-wrapper {
    background: transparent;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.editor-component .dynamic-grid-content,
.preview-component .dynamic-grid-content {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--slot-width));
    grid-auto-rows: var(--slot-height);
    align-content: start;
    justify-content: start;
    overflow: hidden;
    background: transparent;
    gap: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.editor-component .scroll-panel-label {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 3px;
    border-radius: 2px;
}

/* Fake scrollbar styles */
.fake-scrollbar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: url('https://raw.githubusercontent.com/Mojang/bedrock-samples/main/resource_pack/textures/ui/ScrollRail.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    border: none;
    z-index: 10;
}

.fake-scrollbar-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.fake-scrollbar-thumb {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    height: 40%;
    background: none;
    border: 1px solid transparent;
    border-image-source: url('https://raw.githubusercontent.com/Mojang/bedrock-samples/main/resource_pack/textures/ui/ScrollHandle.png');
    border-image-slice: 1 1 3 1 fill;
    border-image-width: 1px 1px 3px 1px;
    border-image-repeat: stretch;
    box-sizing: border-box;
    pointer-events: none;
}

/* Custom texture overrides */
.dynamic-grid[data-scroll-rail-custom="true"] .fake-scrollbar {
    background-image: var(--scroll-rail-custom-image);
}

.dynamic-grid[data-scroll-handle-custom="true"] .fake-scrollbar-thumb {
    border-image-source: var(--scroll-handle-custom-image);
}

.dynamic-grid[data-scroll-bg-custom="true"] .dynamic-grid-content {
    background-image: var(--scroll-bg-custom-image);
    background-repeat: repeat;
    background-size: 100% 100%;
}

.preview-component .scroll-panel-label {
    display: none;
}

.editor-component .dynamic-grid-slot {
    width: var(--slot-width);
    height: var(--slot-height);
    background-color: var(--mc-item-slot);
    border: 2px solid var(--mc-item-slot-border);
    box-sizing: border-box;
}

.preview-component .dynamic-grid-slot {
    width: var(--slot-width);
    height: var(--slot-height);
    border-top: 1px solid #373737;
    border-left: 1px solid #373737;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    background-color: #8b8b8b;
    box-sizing: border-box;
}

.editor-component.image {
    background-color: rgba(100, 100, 100, 0.15);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.editor-component.image:hover {
    background-color: rgba(100, 100, 100, 0.3);
}

.editor-component.image.selecting {
    outline: 2px dashed var(--mc-selection);
    background-color: rgba(77, 157, 224, 0.2);
}

.editor-component.image[data-texture="textures/ui/combiner_cross"] {
    background-image: url('../assets/images/ui/combiner_cross.png');
}

.editor-component.image[data-texture="textures/ui/dark_plus"] {
    background-image: url('../assets/images/ui/dark_plus.png');
}

.editor-component.image[data-texture="textures/ui/on_off/on_off"] {
    background-image: url('../assets/images/ui/on_off/on_off.png');
}

.editor-component.image[data-texture="textures/ui/pot/pot"] {
    background-image: url('../assets/images/ui/pot.png');
}

.editor-component.label {
    font-family: 'Minecraft', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
    text-shadow: none;
    background-color: transparent;
    border-radius: 0;
}

.editor-component.label:hover {
    background-color: transparent;
}

.editor-component.label.selecting {
    outline: 2px dashed var(--mc-selection);
    background-color: rgba(77, 157, 224, 0.2);
}

.template-preview.empty {
    background-color: rgba(60, 60, 60, 0.5);
    opacity: 0.5;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-preview.empty::after {
    content: "Empty";
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.template-preview.empty:hover {
    opacity: 1;
    background-color: rgba(80, 80, 80, 0.5);
}

.template-preview.vanilla {
    background-image: url('../assets/images/vanilla.png');
    image-rendering: pixelated;
    opacity: 0.5;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.template-preview.vanilla:hover {
    opacity: 1;
}

.template-preview.double-chest {
    opacity: 0.5;
    background-color: #8b8b8b;
    background-image:
        linear-gradient(to right, #373737 1px, transparent 1px),
        linear-gradient(to bottom, #373737 1px, transparent 1px);
    background-size: 10px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    image-rendering: pixelated;
}

.template-preview.double-chest:hover {
    opacity: 1;
}

.template-preview.cooking-pot {
    background-image: url('../assets/images/cooking-pot.png');
    image-rendering: pixelated;
    opacity: 0.5;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.template-preview.cooking-pot:hover {
    opacity: 1;
}

.template-preview.crafting {
    background-image: url('../assets/images/crafting.png');
    image-rendering: pixelated;
    opacity: 0.5;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.template-preview.crafting:hover {
    opacity: 1;
}

.template-preview.combiner {
    background-image: url('../assets/images/combiner.png');
    image-rendering: pixelated;
    opacity: 0.5;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.template-preview.combiner:hover {
    opacity: 1;
}

.component-container {
    width: 176px;
    position: absolute;
    height: 76px;
    min-height: 76px;
}

.editor-component.image.custom-image,
.preview-component.image.custom-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.image-upload-container {
    margin-top: 8px;
}

.upload-image-btn {
    width: 100%;
    margin-top: 5px;
}

.custom-image-preview {
    width: 100%;
    height: 80px;
    margin-top: 5px;
    border: 1px solid var(--mc-border);
    background-color: rgba(0, 0, 0, 0.2);
}

.editor-component.close-button {
    background-color: unset;
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    cursor: pointer;
}

.editor-component.close-button:hover {
    background-color: var(--mc-button-hover);
}

.editor-component.close-button.selected {
    outline: 2px solid var(--mc-selection);
}

.editor-component.close-button.selecting {
    outline: 2px dashed var(--mc-selection);
}

.preview-component.close-button {
    background-color: unset;
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    cursor: pointer;
}

.preview-component.close-button:hover {
    background-color: var(--mc-button-hover);
}

.editor-component.button,
.preview-component.button {
    background-color: unset;
    border: none;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
    overflow: hidden;
    text-shadow: none;
    transform: none;
}

.editor-component.button:hover,
.preview-component.button:hover {
    border-image-source: var(--button-hover-texture);
    background-color: transparent;
    transform: none;
}

.editor-component.button.selected {
    outline: 2px solid var(--mc-selection);
}

.editor-component.button.selecting {
    outline: 2px dashed var(--mc-selection);
}

.button-embedded-image {
    position: absolute;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.button-embedded-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Minecraft', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow: none;
    pointer-events: none;
}

/* Custom texture styling - handled dynamically in JavaScript */

.close-button-icon {
    pointer-events: none;
}

.editor-component.tab.active,
.preview-component.tab.active {
    outline: 1px solid var(--mc-selection);
    outline-offset: -1px;
}

.editor-component.tab.selected {
    outline: 2px solid var(--mc-selection);
}

.chest-top-half.has-tabs::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px dashed rgba(77, 157, 224, 0.2);
    pointer-events: none;
    box-sizing: border-box;
}