/* ==========================================================================
   iCloneU — Empty-state pattern (Phase 4 of Knowledge UI harmonization)
   --------------------------------------------------------------------------
   Standardizes "there's nothing here yet" surfaces so empty states across
   the app read as siblings instead of as bespoke per-popup placeholders.

   Use the <IcuEmptyState> component (Components/IcuEmptyState.razor) for
   the markup; this stylesheet supplies the chrome. The component composes
   a 4-line invocation that's easier to read than the previous inline
   <div><i><span>...</span></div> pattern repeated across files.

   Variants:

     .icu-empty-state             Default — generous 40px padding, large
                                   icon, title + description. Use inside
                                   popup bodies and full-card surfaces.

     .icu-empty-state--compact    Tighter padding (16px), no large icon —
                                   for inline placeholders like a small
                                   drawer ("no rows today") where the
                                   default would feel oversized.

   Promoted from .icu-rail-empty (was scoped CSS in
   ExpertsContent.razor.css). The Experts page keeps its private alias;
   new callers should use the global icu-empty-state class.
   ========================================================================== */

.icu-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--icu-sp-2);                /* 8px between icon / title / desc */
    padding: var(--icu-sp-10) var(--icu-sp-5);   /* 40px / 20px */
    text-align: center;
    color: var(--icu-ink-3);
    font-size: var(--icu-fs-base);
}

.icu-empty-state-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--icu-ink-4);
    margin-bottom: var(--icu-sp-1);
}

.icu-empty-state-title {
    font-family: var(--icu-font-sans);
    font-size: var(--icu-fs-md);          /* 15px — matches .icu-section-title */
    font-weight: var(--icu-fw-semibold);  /* 600 */
    color: var(--icu-ink);
    line-height: 1.3;
}

.icu-empty-state-desc {
    font-family: var(--icu-font-sans);
    font-size: var(--icu-fs-sm);          /* 12px — matches .icu-help-text */
    color: var(--icu-ink-3);
    line-height: 1.45;
    max-width: 38ch;                       /* keep description from sprawling */
}

/* Compact variant for tight surfaces (table drawer rows, inline lists).
   No large icon, smaller padding, single-line title or short text. */
.icu-empty-state--compact {
    padding: var(--icu-sp-4) var(--icu-sp-3);    /* 16px / 12px */
    gap: var(--icu-sp-1);                          /* 4px */
}

.icu-empty-state--compact .icu-empty-state-icon {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.icu-empty-state--compact .icu-empty-state-title {
    font-size: var(--icu-fs-base);                 /* 13.5px */
}

.icu-empty-state--compact .icu-empty-state-desc {
    font-size: var(--icu-fs-sm);
}

/* When the empty state is a "loading" placeholder (waiting for a fetch
   to complete), append .icu-empty-state--loading. The icon dims and we
   add a subtle pulse so users can tell "nothing yet, please wait" apart
   from "nothing here at all". */
.icu-empty-state--loading .icu-empty-state-icon {
    opacity: 0.5;
    animation: icu-empty-pulse 1.6s ease-in-out infinite;
}

@keyframes icu-empty-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.75; }
}