/* =============================================================================
   Empty states  (partials/empty-state.html + partials/empty-illustrations.html)
   -----------------------------------------------------------------------------
   One shape for "there is nothing here yet" across the whole app: a small
   two-colour illustration, a title, one sentence, and room for an action.
   Replaces the grey one-liners (`.ci-empty`) and the icon-font tiles the
   claims, users, billing and log pages each drew their own way.

   Built on the portal tokens. The illustration is square: one soft disc with
   the scene fitted inside it, painted in `currentColor` (the card's text
   colour, at low opacity inside the symbols) and the mint accent, so it holds
   up on both themes with one drawing. Namespace `fx`.
   ============================================================================= */

.fx-empty {
    --fx-ill-accent: var(--pt-mint2, #00b386);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 24px 48px;
    text-align: center;
    color: rgb(var(--pt-text, 13 24 46));
}

html[data-bs-theme="dark"] .fx-empty {
    --fx-ill-accent: var(--pt-mint, #06d6a0);
}

.fx-empty--compact {
    padding: 26px 20px 30px;
}

.fx-empty-art {
    display: block;
    width: 128px;
    height: 128px;
    margin-bottom: 6px;
}

.fx-empty--compact .fx-empty-art {
    width: 104px;
    height: 104px;
    margin-bottom: 2px;
}

/* portal.css styles h1 to h5 under body.portal-theme with a (0,1,1) selector;
   the class chain here outscores it without `!important`. */
.fx-empty .fx-empty-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgb(var(--pt-text, 13 24 46));
}

.fx-empty--compact .fx-empty-title {
    font-size: 14.5px;
}

.fx-empty .fx-empty-text {
    margin: 0;
    max-width: 52ch;
    font-size: 13px;
    line-height: 1.55;
    color: rgb(var(--pt-text, 13 24 46) / 0.55);
}

.fx-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* Motion: the picture settles in with the card. Opt-out under reduced motion. */
@keyframes fx-empty-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.fx-empty-art {
    animation: fx-empty-in 0.5s var(--pt-ease, ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    .fx-empty-art {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .fx-empty {
        padding: 32px 16px 36px;
    }

    .fx-empty-art {
        width: 112px;
        height: 112px;
    }
}