/* =========================================================================================================
   RF-UI-BASE (2026-10-11) — RapidForge asynchronous UI states: skeletons, state panels, busy controls.
   ---------------------------------------------------------------------------------------------------------
   Generic framework layer (no brand colour). Every colour is derived from the theme's semantic tokens
   (--page-fg, --muted-fg, --card-bg, --card-border) or Bootstrap 5.3's own colour-mode variables, so the same rules
   read correctly in Light, Dark and System (RF-3) and under any Theme Library profile. Logical properties only
   (inline-start / inline-end), so Arabic (RTL) and English (LTR) need no separate rules.

     1. Tokens            — skeleton base / highlight, derived from the page foreground.
     2. Skeleton family   — line, text, avatar, image, card, tile, form, table, list, gallery.
     3. Shimmer + motion  — a slow sweep; STATIC when the user prefers reduced motion.
     4. State panels      — empty / no results / error / permission denied (+ compact variant).
     5. Async regions     — [data-rf-async-region] keeps its height while busy; aria-busy styling.
     6. Busy controls     — a button / form doing a short operation.
   Markup: Views/Shared/UiStates/_Skeleton.cshtml, _UiState.cshtml, _UiStateTemplates.cshtml.
   Behaviour: js/rf-async-region.js.
   ========================================================================================================= */

/* ---- 1. Tokens --------------------------------------------------------------------------------------- */
:root {
    --rf-sk-base: color-mix(in srgb, var(--page-fg, currentColor) 9%, transparent);
    --rf-sk-highlight: color-mix(in srgb, var(--page-fg, currentColor) 4%, transparent);
    --rf-sk-radius: var(--theme-radius-sm, 0.375rem);
    --rf-sk-line-height: 0.75rem;
    --rf-state-icon-bg: color-mix(in srgb, var(--page-fg, currentColor) 7%, transparent);
}

html[data-theme="dark"] {
    --rf-sk-base: color-mix(in srgb, var(--page-fg, currentColor) 12%, transparent);
    --rf-sk-highlight: color-mix(in srgb, var(--page-fg, currentColor) 5%, transparent);
}

/* ---- 2. Skeleton family ------------------------------------------------------------------------------ */
.rf-skeleton {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.rf-sk-line,
.rf-sk-block,
.rf-sk-avatar,
.rf-sk-image {
    display: block;
    background-color: var(--rf-sk-base);
    border-radius: var(--rf-sk-radius);
}

.rf-sk-line {
    block-size: var(--rf-sk-line-height);
    margin-block: 0.45rem;
}

.rf-sk-line--sm { block-size: 0.55rem; }
.rf-sk-line--lg { block-size: 1.1rem; }

/* Five widths, cycled by the partial, so placeholder text looks like text. */
.rf-sk-w1 { inline-size: 96%; }
.rf-sk-w2 { inline-size: 84%; }
.rf-sk-w3 { inline-size: 68%; }
.rf-sk-w4 { inline-size: 52%; }
.rf-sk-w5 { inline-size: 38%; }

.rf-sk-avatar {
    flex: 0 0 auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
}

.rf-sk-avatar--sm {
    inline-size: 2rem;
    block-size: 2rem;
}

.rf-sk-image {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
}

.rf-sk-image--card { margin-block-end: 0.75rem; }
.rf-sk-image--square { aspect-ratio: 1 / 1; }

.rf-sk-media {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.5rem;
}

.rf-sk-media__body {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.rf-sk-card,
.rf-sk-tile {
    padding: 1rem;
    border: 1px solid var(--card-border, var(--bs-border-color));
    border-radius: var(--theme-radius, 0.75rem);
    background-color: var(--card-bg, var(--bs-body-bg));
}

.rf-sk-block--figure {
    inline-size: 45%;
    block-size: 1.75rem;
    margin-block-start: 0.75rem;
}

.rf-sk-form {
    display: grid;
    gap: 0.9rem;
}

.rf-sk-field .rf-sk-line { margin-block: 0 0.4rem; }

.rf-sk-block--input {
    inline-size: 100%;
    block-size: 2.375rem; /* Bootstrap .form-control height */
}

.rf-sk-block--button {
    inline-size: 7.5rem;
    block-size: 2.375rem;
    margin-block-start: 0.25rem;
}

.rf-sk-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.rf-sk-grid--gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }

.rf-sk-table__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.6rem;
    padding-inline: 0.5rem;
    border-block-end: 1px solid var(--card-border, var(--bs-border-color));
}

.rf-sk-table__row--head { padding-block: 0.75rem; }
.rf-sk-table__row .rf-sk-line { margin-block: 0.15rem; }

/* A wide table skeleton keeps at most 3 columns on a phone, like the real responsive table. */
@media (max-width: 575.98px) {
    .rf-sk-table__row > :nth-child(n + 4) { display: none; }
}

.rf-sk-list .rf-sk-media + .rf-sk-media {
    border-block-start: 1px solid var(--card-border, var(--bs-border-color));
}

/* ---- 3. Shimmer + reduced motion --------------------------------------------------------------------- */
.rf-skeleton .rf-sk-line,
.rf-skeleton .rf-sk-block,
.rf-skeleton .rf-sk-avatar,
.rf-skeleton .rf-sk-image {
    background-image: linear-gradient(90deg, transparent 0%, var(--rf-sk-highlight) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: rf-sk-shimmer 1.6s ease-in-out infinite;
}

html[dir="rtl"] .rf-skeleton .rf-sk-line,
html[dir="rtl"] .rf-skeleton .rf-sk-block,
html[dir="rtl"] .rf-skeleton .rf-sk-avatar,
html[dir="rtl"] .rf-skeleton .rf-sk-image {
    animation-direction: reverse; /* the sweep follows the reading direction */
}

@keyframes rf-sk-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rf-skeleton .rf-sk-line,
    .rf-skeleton .rf-sk-block,
    .rf-skeleton .rf-sk-avatar,
    .rf-skeleton .rf-sk-image {
        animation: none;
        background-image: none;
    }

    .rf-busy-spinner { animation-duration: 2.4s; }
}

/* ---- 4. State panels --------------------------------------------------------------------------------- */
.rf-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    max-inline-size: 36rem;
    margin-inline: auto;
    padding-block: 2.5rem;
    padding-inline: 1rem;
    color: var(--page-fg, var(--bs-body-color));
    overflow-wrap: anywhere;
}

.rf-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin-block-end: 0.25rem;
    border-radius: 50%;
    background-color: var(--rf-state-icon-bg);
    color: var(--muted-fg, var(--bs-secondary-color));
    font-size: 1.4rem;
}

.rf-state--error .rf-state__icon {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.rf-state--denied .rf-state__icon {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.rf-state__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
}

.rf-state__text {
    margin: 0;
    color: var(--muted-fg, var(--bs-secondary-color));
    font-size: 0.925rem;
    line-height: 1.55;
}

.rf-state__ref {
    margin: 0;
    color: var(--muted-fg, var(--bs-secondary-color));
    font-size: 0.8rem;
}

.rf-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
}

.rf-state__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 2.5rem; /* comfortable touch target */
}

.rf-state--compact {
    padding-block: 1.5rem;
    gap: 0.35rem;
}

.rf-state--compact .rf-state__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: 1.05rem;
}

.rf-state--compact .rf-state__title { font-size: 1rem; }

/* A state rendered as a DataTables row spans the table without the table's hover / stripe colours. */
.rf-dt-state-row > td,
table.dataTable td.dt-empty,
table.dataTable td.dataTables_empty {
    background-color: transparent !important;
    box-shadow: none !important;
    white-space: normal;
}

/* ---- 5. Async regions -------------------------------------------------------------------------------- */
[data-rf-async-region] {
    position: relative;
    min-inline-size: 0;
}

[data-rf-async-region][aria-busy="true"] [data-rf-region-content]:not([hidden]) {
    opacity: 0.55;
    transition: opacity 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    [data-rf-async-region][aria-busy="true"] [data-rf-region-content]:not([hidden]) { transition: none; }
}

/* ---- 6. Busy controls -------------------------------------------------------------------------------- */
.rf-busy-spinner {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    border: 0.15em solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    animation: rf-busy-spin 0.75s linear infinite;
}

@keyframes rf-busy-spin { to { transform: rotate(360deg); } }

.btn[aria-busy="true"] {
    cursor: progress;
}

.btn[aria-busy="true"] .rf-busy-spinner { margin-inline-end: 0.4rem; }