/*
 * entity_grid_widget — visual layer.
 *
 * The renderer (EntityGridWidgetRenderer.kt) emits this structure:
 *
 *   .entity-grid-widget                ← root
 *     .entity-grid-title               ← optional heading (raw HTML)
 *     .entity-grid-body                ← region wrapper
 *       div.entity-grid                ← flex-wrap row container
 *         div.entity-grid-item         ← one tile, holds the listitem widget
 *         div.entity-grid-empty        ← shown when boundRows is empty
 *         div.entity-grid-skeleton     ← design-mode skeleton fillers
 *
 * Tile sizing: each item defaults to ~240px min-width, growing to fill
 * available space via flex: 1 1 240px. Authors can override with design-
 * panel CSS on the .entity-grid-item region.
 */

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

/* Heading line above the grid. */
.entity-grid-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-grid-body {
    display: block;
}

/* ── Grid container ────────────────────────────────────────────────────── */

div.entity-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
}

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

div.entity-grid-item {
    flex: 1 1 240px;
    min-width: 0;
    box-sizing: border-box;
}

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

div.entity-grid-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) ─────────────────────────── */

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

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

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