.drop-zone-scroll-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.drop-zone-scroll-shell.scrollable {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pinch-zoom;
    scrollbar-width: thin;
}

.drop-zone-scroll-shell.scrollable-y {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    max-height: var(--widget-grid-height-limit);
}

.drop-zone-scroll-shell.scrollable::-webkit-scrollbar {
    height: 0.5rem;
}

.drop-zone-scroll-shell.scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.drop-zone-scroll-shell.scrollable::-webkit-scrollbar-track {
    background-color: transparent;
}

.drop-zone-grid {
    position: relative;
    display: grid;
    --drop-zone-default-height-limit: calc(var(--app-height, 100dvh) - var(--footer-height, 0px) - var(--footer-gap, 0px));
    --widget-grid-height-limit: var(--panel-widget-grid-height-limit, var(--drop-zone-default-height-limit));
    --widget-column-size: calc(100vw / 12);
    --widget-row-size: min(
        var(--widget-column-size),
        calc(var(--widget-grid-height-limit) / var(--rows, 8))
    );
    --widget-cell-size: var(--widget-row-size);
    --widget-cell-gap: clamp(0.35rem, calc(var(--widget-cell-size) * 0.05), 0.85rem);
    --widget-action-size: clamp(2.75rem, calc(var(--widget-cell-size) * 0.35), 3.75rem);
    --widget-action-offset: clamp(0.45rem, calc(var(--widget-cell-size) * 0.08), 1.35rem);
    --widget-action-gap: clamp(0.5rem, calc(var(--widget-cell-size) * 0.18), 1.5rem);
    --widget-action-stack-step: calc(var(--widget-action-size) + var(--widget-action-gap));
    --widget-clipboard-right: calc(var(--widget-action-offset) + var(--widget-action-stack-step));
    --widget-edit-right: calc(var(--widget-action-offset) + var(--widget-action-stack-step) * 2);
    grid-template-columns: repeat(var(--cols, 12), var(--widget-column-size));
    grid-template-rows: repeat(var(--rows, 8), var(--widget-row-size));
    width: calc(var(--widget-column-size) * var(--cols, 12));
    height: calc(var(--widget-row-size) * var(--rows, 8));
    overflow-x: hidden;
    overflow-y: hidden;
    flex: none;
/*    background-color: rgba(255, 255, 255, 0.02);*/
    touch-action: none; /* disable scrolling during drag */
    -ms-touch-action: none;
}

.drop-zone-grid.scrollable {
    touch-action: pan-x pinch-zoom; /* allow horizontal scroll on touch devices */
    -ms-touch-action: pan-x;
}

.drop-zone-grid.scrollable-y {
    --widget-row-size: var(--widget-column-size);
    height: calc(var(--widget-row-size) * var(--rows, 8));
    min-height: calc(var(--widget-column-size) * var(--rows, 8));
    touch-action: pan-y pinch-zoom;
    -ms-touch-action: pan-y;
}

.drop-zone-grid.scrollable.scrollable-y,
.drop-zone-grid.scrollable-x.scrollable-y {
    touch-action: pan-x pan-y pinch-zoom;
    -ms-touch-action: pan-x pan-y;
}

.drop-zone-grid::before {
    content: "";
    position: absolute;
    inset: 0;
/*    background-image: linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 5px),
                      linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 5px);*/
    background-size: calc(100% / var(--cols, 12)) calc(100% / var(--rows, 8));
    background-repeat: repeat;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.drop-zone-grid.grid-visible::before {
    opacity: 1;
}

.drop-zone-grid.hidden {
    display: none;
}

.widget-wrapper {
    padding: var(--widget-cell-gap, 0.5rem);
    display: flex;
    user-select: none;
    touch-action: none; /* disable scrolling during drag */
    -ms-touch-action: none;
}
.drop-zone-grid.scrollable .widget-wrapper {
    touch-action: pan-x; /* allow horizontal scroll when side scrolling */
    -ms-touch-action: pan-x;
}

.drop-zone-grid.scrollable .widget-instance {
    touch-action: pan-x; /* enable finger-driven horizontal scrolling */
    -ms-touch-action: pan-x;
}

.widget-wrapper.editable {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: grab;
}

.widget-wrapper.editable:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.widget-wrapper.editable .resize-handle {
    display: block;
}

.widget-wrapper.preview {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    box-shadow: none;
    opacity: 0.8;
    cursor: default;
    pointer-events: none;
}

.widget-wrapper.preview {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    opacity: 0.8;
    box-shadow: none;
    pointer-events: none;
    z-index: 1;
}

.widget-instance {
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: clamp(8px, 3vh, 18px);
    user-select: none;
    touch-action: none; /* disable browser long press */
    -ms-touch-action: none;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.resize-handle {
    display: none;
    position: absolute;
    background: transparent;
    pointer-events: all;
    touch-action: none;
    z-index: 12;
}

.resize-handle.top,
.resize-handle.bottom {
    width: 3.5rem;
    height: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.resize-handle.bottom { bottom: -2.5rem; }
.resize-handle.top { top: -2.5rem; }

.resize-handle.left,
.resize-handle.right {
    width: 3.5rem;
    height: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.resize-handle.left { left: -2.5rem; }
.resize-handle.right { right: -2.5rem; }

    .resize-handle::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        /*    background: #00e5e2;*/
        background: var(--mud-palette-primary-darken);
/*        box-shadow: 0 0 12px rgba(0, 229, 226, 0.45);*/
        opacity: 0.95;
    }

.resize-handle.top::after,
.resize-handle.bottom::after {
    width: 2.5rem;
    height: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
}

.resize-handle.top::after { bottom: 0.15rem; }
.resize-handle.bottom::after { top: 0.15rem; }

.resize-handle.left::after,
.resize-handle.right::after {
    width: 0.4rem;
    height: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.resize-handle.left::after { right: 0.15rem; }
.resize-handle.right::after { left: 0.15rem; }

.widget-wrapper.editable .widget-instance::before,
.widget-wrapper.editable .widget-instance::after {
    content: "";
    position: absolute;
    inset: 0.4rem;
    pointer-events: none;
    border-radius: inherit;
}

/*.widget-wrapper.editable .widget-instance::before {
    background:
        linear-gradient(90deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) top left/18px 3px no-repeat,
        linear-gradient(180deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) top left/3px 18px no-repeat,
        linear-gradient(270deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) top right/18px 3px no-repeat,
        linear-gradient(180deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) top right/3px 18px no-repeat;
}

.widget-wrapper.editable .widget-instance::after {
    background:
        linear-gradient(90deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) bottom left/18px 3px no-repeat,
        linear-gradient(0deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) bottom left/3px 18px no-repeat,
        linear-gradient(270deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) bottom right/18px 3px no-repeat,
        linear-gradient(0deg, rgba(0, 229, 226, 0.9) 14px, transparent 14px) bottom right/3px 18px no-repeat;
}*/

.widget-wrapper.editable .widget-instance::before {
    z-index: 12;
    background: linear-gradient(90deg, var(--mud-palette-primary-darken) 14px, transparent 14px) top left/18px 3px no-repeat, linear-gradient(180deg, var(--mud-palette-primary-darken) 14px, transparent 14px) top left/3px 18px no-repeat, linear-gradient(270deg, var(--mud-palette-primary-darken) 14px, transparent 14px) top right/18px 3px no-repeat, linear-gradient(180deg, var(--mud-palette-primary-darken) 14px, transparent 14px) top right/3px 18px no-repeat;
}

.widget-wrapper.editable .widget-instance::after {
    z-index: 12;
    background: linear-gradient(90deg, var(--mud-palette-primary-darken) 14px, transparent 14px) bottom left/18px 3px no-repeat, linear-gradient(0deg, var(--mud-palette-primary-darken) 14px, transparent 14px) bottom left/3px 18px no-repeat, linear-gradient(270deg, var(--mud-palette-primary-darken) 14px, transparent 14px) bottom right/18px 3px no-repeat, linear-gradient(0deg, var(--mud-palette-primary-darken) 14px, transparent 14px) bottom right/3px 18px no-repeat;
}





/* === MEDIA === */

/* Mobile  */

@media (max-width: 699px) {
    .drop-zone-scroll-shell {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
    }

    .drop-zone-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        touch-action: pan-y pinch-zoom;
        -ms-touch-action: pan-y;
    }

     .drop-zone-grid .widget-wrapper {
         width: 100% !important;
         padding: 0.25rem;
         position: relative;
     }

     .drop-zone-grid .widget-instance {
         width: 100%;
         height: auto !important;
         aspect-ratio: var(--mobile-aspect, 16 / 9);
         padding: 0.5rem;
     }

     .drop-zone-grid .widget-wrapper[data-width="2"][data-height="3"] {
         --mobile-aspect: 4 / 3;
     }

     .drop-zone-grid .widget-wrapper[data-width="4"][data-height="3"] {
         --mobile-aspect: 4 / 3;
     }

     .drop-zone-grid .widget-wrapper[data-width="6"][data-height="2"] {
         --mobile-aspect: 3 / 1;
     }

     .drop-zone-grid .widget-wrapper[data-width="6"][data-height="4"] {
         --mobile-aspect: 9 / 16;
     }

     .drop-zone-grid .widget-wrapper[data-width="3"][data-height="4"] {
         --mobile-aspect: 9 / 10;
     }

    .drop-zone-grid .widget-wrapper[data-width="4"][data-height="4"] {
        --mobile-aspect: 9 / 10;
    }
}

/* WVGA / WVGA-Narrow (720x480, 800x480) */

@media (min-width: 700px) and (max-width: 880px) {
}

/* WSVGA / XGA (1024x600, 1024x768) */

@media (min-width: 881px) and (max-width: 1150px) {
}

/* WXGA / HD720 / SXGA (1280x720/800/1024) */

@media (min-width: 1151px) and (max-width: 1600px) {
}

/* HD / WUXGA (1920x1080, 1920x1200) */

@media (min-width: 1601px) and (max-width: 2879px) {
}

/* 4K (3840x2160) */

@media (min-width: 2880px) {
}

/* Low height */

@media (min-width: 1000px) and (max-height: 650px) {
    .widget-instance {
        padding: 0.25rem;
    }
}

/* Override for 1024x600 */

@media (width: 1024px) and (height: 600px) {
    .widget-instance {
        padding: 0.25rem;
    }
}