/*
 * entity_glide_widget — visual layer.
 *
 * DOM emitted by EntityGlideWidgetRenderer.kt:
 *
 *   .entity-glide-widget                     ← root (aqcShell)
 *     .entity-glide-title                    ← optional heading
 *     .entity-glide-body                     ← content region
 *       div.glide.<nodeId>_glide             ← Glide root
 *         div.glide__track[data-glide-el]
 *           ul.glide__slides
 *             li.glide__slide               ← one tile per bound row
 *         div.glide__arrows[data-glide-el]   ← prev/next (optional)
 *         div.glide__bullets[data-glide-el]  ← bullet nav (optional)
 *     .entity-glide-empty                    ← shown when boundRows is empty
 *
 * Glide's own stylesheets (/vendor/glidejs/glide.core.min.css and
 * glide.theme.min.css) provide the slider chrome. Our additions here
 * are scoped to layout glue + the empty/skeleton states.
 */

.entity-glide-widget {
    display: block;
    box-sizing: border-box;
}

.entity-glide-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #0f172a;
    margin: 0 0 12px;
}

/* Transparent region wrapper — hook for design-panel overrides. */
.entity-glide-body {
    display: block;
}

/* Each slide is transparent so the listitem widget inside owns its
   appearance. min-width:0 prevents wide content from blowing out the track. */
.entity-glide-widget .glide__slide {
    box-sizing: border-box;
    min-width: 0;
}

.entity-glide-widget .glide__slide > * {
    width: 100%;
    box-sizing: border-box;
}

/* ── Empty-state ──────────────────────────────────────────────────────── */

.entity-glide-empty {
    width: 100%;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

/* ── Skeleton placeholders (design mode only) ─────────────────────────── */

.entity-glide-skeleton-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.entity-glide-skeleton {
    flex: 1 1 240px;
    min-height: 120px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.entity-glide-skeleton .entity-glide-skeleton-line {
    height: 12px;
    width: 60%;
    background: linear-gradient(
        90deg,
        rgba(203, 213, 225, 0.5) 0%,
        rgba(226, 232, 240, 0.9) 50%,
        rgba(203, 213, 225, 0.5) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: entity-glide-skeleton-shimmer 1.4s infinite ease-in-out;
}

@keyframes entity-glide-skeleton-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}