/* ═════════════════════════════════════════════════════════════════════════
   Air list shell — structural CSS for server-side virtualized/paged list
   screens (AirVirtualizedListShell / AirListStatusBar / AirSkeletonRow /
   AirLoadError). Semantic tokens only; no raw colors.
   ═════════════════════════════════════════════════════════════════════════ */

.air-list-shell {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--air-list-offset, 64px));
    min-height: var(--air-list-min-height, 320px);
}

.air-list-toolbar-slot,
.air-list-error-slot,
.air-list-statusbar {
    flex: 0 0 auto;
}

.air-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--air-surface);
}

.air-list-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--air-surface);
    border-bottom: 1px solid var(--air-border);
    font-weight: var(--air-font-weight-semibold);
    font-size: var(--air-font-size-sm, 0.8rem);
}

.air-list-statusbar {
    padding: var(--air-space-xs) var(--air-space-md);
    border-top: 1px solid var(--air-border-soft);
    color: var(--air-text-muted);
    font-size: var(--air-font-size-sm, 0.8rem);
}

.air-list-status { display: flex; gap: var(--air-space-sm); align-items: center; }
.air-list-status-loading { color: var(--air-text-subtle); }
.air-list-status-trailing { margin-left: auto; }

/* Row primitives: fixed height, ellipsis, hover — consumers define the grid
   template columns for their DTO. */
.air-list-row {
    display: grid;
    align-items: center;
    column-gap: var(--air-space-xs);
    border-bottom: 1px solid var(--air-border-soft);
    cursor: pointer;
    overflow: hidden;
}

.air-list-row:hover { background: var(--air-hover); }
.air-list-row > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.air-list-sortable { cursor: pointer; user-select: none; }

.air-skeleton-row {
    display: flex;
    align-items: center;
    padding: 0 var(--air-space-md);
    border-bottom: 1px solid var(--air-border-soft);
}

.air-skeleton-bar {
    width: 100%;
    height: 1.2em;
    border-radius: var(--air-radius);
    background: var(--air-bg-muted);
    animation: air-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes air-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.air-load-error {
    display: flex;
    align-items: center;
    gap: var(--air-space-sm);
    margin: var(--air-space-sm) var(--air-space-md);
    padding: var(--air-space-sm) var(--air-space-md);
    border: 1px solid var(--air-danger-border);
    border-radius: var(--air-radius);
    background: var(--air-danger-bg);
    color: var(--air-danger-text);
}