/*
 * entity_list_widget — visual layer.
 *
 * The renderer (EntityListWidgetRenderer.kt) emits this structure:
 *
 *   .entity-list-widget                ← root
 *     .entity-list-title               ← optional heading (raw HTML)
 *     .entity-list-body                ← contains the <ul>
 *       ul.entity-list                 ← row container
 *         li.entity-list-item          ← one row, holds the listitem widget
 *         li.entity-list-empty         ← shown when boundRows is empty
 *         li.entity-list-skeleton      ← design-mode skeleton fillers
 *
 * Goal: provide structural defaults (spacing, no bullets) without
 * fighting the listitem widget's own styling. Each `<li>` is a
 * transparent shell — the visual weight lives inside the chosen
 * listitem template (e.g. card-listitem-widget).
 */

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


/* Heading line above the list. */
.entity-list-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #0f172a;
    margin: 0 0 12px;
}

/* The list body is just a transparent container today; left here as a
   targeting hook for design-panel CSS overrides. */
.entity-list-body {
    display: block;
}

/* ── List container ────────────────────────────────────────────────────── */
/* Reset `<ul>` defaults. The visual rhythm is row-spacing only; the
   row's content (the listitem widget) provides the rest. */

ul.entity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Row shell ────────────────────────────────────────────────────────── */
/* Transparent — the listitem widget inside owns the look. */

li.entity-list-item {
    display: block;
    margin: 0;
    padding: 0;
}

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

li.entity-list-empty {
    display: block;
    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) ─────────────────────────── */
/* Shown when no rows are bound — keeps the canvas slot from collapsing
   while the author wires up the data source. */

li.entity-list-skeleton {
    display: block;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

li.entity-list-skeleton .entity-list-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-list-skeleton-shimmer 1.4s infinite ease-in-out;
}

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