/* ==========================================================================
   GLOBAL SKELETON CONFIGURATION
   ========================================================================== */

@keyframes shimmer-move {
    0% {
        background-position: var(--shimmer-start) 0;
    }
    100% {
        background-position: var(--shimmer-end) 0;
    }
}

.loading .object-list-row :not(.status-badge-parent),
.loading .checkbox-parent,
.loading .panel-head,
.loading .btn,
.loading .style-primary,
.loading .icon-button,
.loading .input-search,
.loading .desc-first-row,
.loading .desc-head,
.loading .status, 
.loading .status-mid, 
.loading .status-full, 
.loading .select-parent,
.loading .input, 
.loading .quota-wrapper,
.loading .hierarchy-item-row-line,
.loading .panel-right-number,
.loading .custom-select-wrapper,
.loading .status-badge-child,
.loading .product-image,
.loading .tab-btn,
.loading .toggle-container,
.loading .file-list-container,
.loading .mt-2
 {
    position: relative !important;
    display: block !important;
    border-radius: 2px !important;
    opacity: 1;
    
    background-image: linear-gradient(90deg, 
    var(--surface-on-surface-opacity-10) 40%,
     var(--surface-on-surface-opacity-20)50%, 
     var(--surface-on-surface-opacity-10) 60%) !important;
    
    /* 2. Genau deine funktionierende Größen-Logik */
    --shimmer-width: 200%;
    --shimmer-start: 100%;
    --shimmer-end: -100%;
    background-size: var(--shimmer-width) 100% !important;
    background-repeat: repeat !important;

    /* 3. Genau deine funktionierende Animations-Logik */
    animation: shimmer-move 1.5s infinite linear !important;

    color: transparent !important;
    border-color: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
    box-shadow: none !important;
    background-color: var(--surface-on-surface-opacity-3) !important;
}

.loading {
    pointer-events: none !important;
}

/* ==========================================================================
   ELEMENT-SPECIFIC OVERRIDES
   ========================================================================== */

.loading .checkbox-parent, 
.loading .checkbox-parent *,
.loading .object-list-row .checkbox-parent,
.loading .object-list-row .checkbox-parent * {
    --shimmer-width: 200px;
    --shimmer-start: -100px;
    --shimmer-end: 100px;
}

.loading .panel-head{
    max-width: 50%;
}

.loading .panel-right-number {
    max-height: 28px;
}

.loading .status {
    min-height: 24px;
}

.panel-right.loading .icon-button {
    --shimmer-width: 300px;
    --shimmer-start: -150px;
    --shimmer-end: 150px;
}

.loading .input-with-button,
.loading .select, 
.loading .quota-info,
.loading .quota-progress-container,
.loading .selected-item,
.loading .status-text,
.loading .product-image-container, 
.loading .icon-src,
.loading .slider,
.loading .empty-info,
.loading .custom-upload-label,
.loading .hierarchy-item-row-line * {
    opacity: 0;
}

.loading input::placeholder {
    color: transparent !important;
}

.loading .hierarchy-item-row-line {
    min-height: 24px;
    max-height: 37px;
    min-width: 30%;
}

.loading .tab-btn-active {
    border-bottom: none;
}

.loading .slinder{
    min-height: 24px;
    min-width: 44px;
}