/* ============================================================
   ArchiMesh Loading Primitives (Wave 4 #4)
   ------------------------------------------------------------
   Companion stylesheet for the four non-skeleton loading
   primitives:

     .button-loading-state     - spinner injected into a button
     .inline-loading-indicator - small in-row / in-cell spinner
     .progress-indicator       - determinate progress bar
     .stale-data-refresh       - "data is stale, click to refresh" banner

   The Skeleton primitive owns its own stylesheet at
   `skeleton_loader.css`. Both files share the same shimmer / spinner
   timing tokens via `archimesh-design-tokens.css` so the design
   language stays consistent across all five primitives.

   prefers-reduced-motion is honoured via dedicated media query
   blocks at the bottom of each section.
   ============================================================ */

/* ── Button Loading State ─────────────────────────────────── */

:where(.button-loading-state__spinner) {
    --button-loading-state-spinner-dot-color: currentColor;
    display: none;
    gap: 4px;
    margin-right: 8px;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
}

:where(.button-loading-state--active .button-loading-state__spinner:not([hidden])) {
    display: inline-flex;
}

:where(.button-loading-state__spinner[hidden]) {
    display: none;
}

:where(.button-loading-state__spinner) i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--button-loading-state-spinner-dot-color);
    opacity: 0.6;
    animation: button-loading-state-bounce 1.2s infinite ease-in-out both;
}

:where(.button-loading-state__spinner) i:nth-child(1) {
    animation-delay: -0.32s;
}

:where(.button-loading-state__spinner) i:nth-child(2) {
    animation-delay: -0.16s;
}

.button-loading-state--active {
    cursor: progress;
}

.button-loading-state--optimistic {
    cursor: default;
}

@keyframes button-loading-state-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0; }
    40% { transform: scale(1); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.button-loading-state__spinner) i {
        animation: none;
        opacity: 0.5;
    }
}

/* ── Inline Loading Indicator ─────────────────────────────── */

.inline-loading-indicator {
    --inline-loading-indicator-glyph-color: currentColor;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--archimesh-theme-text-muted);
    line-height: 1;
    vertical-align: middle;
}

.inline-loading-indicator__glyph {
    width: 14px;
    height: 14px;
    border: 2px solid var(--inline-loading-indicator-glyph-color, currentColor);
    border-top-color: var(--archimesh-theme-on-accent-transparent);
    border-radius: 50%;
    display: inline-block;
    animation: inline-loading-indicator-rotate 1s linear infinite;
}

.inline-loading-indicator__label {
    font-size: 0.875rem;
    color: inherit;
}

.inline-loading-indicator--size-sm .inline-loading-indicator__glyph {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
}

.inline-loading-indicator--size-sm .inline-loading-indicator__label {
    font-size: 0.75rem;
}

.inline-loading-indicator--size-md .inline-loading-indicator__glyph {
    width: 14px;
    height: 14px;
}

.inline-loading-indicator--size-lg .inline-loading-indicator__glyph {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
}

.inline-loading-indicator--size-lg .inline-loading-indicator__label {
    font-size: 1rem;
}

@keyframes inline-loading-indicator-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .inline-loading-indicator__glyph {
        animation: none;
        border-top-color: var(--inline-loading-indicator-glyph-color, currentColor);
        opacity: 0.5;
    }
}

/* ── Progress Indicator ───────────────────────────────────── */

.progress-indicator {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    font-family: inherit;
}

.progress-indicator__label {
    font-size: 0.875rem;
    color: var(--archimesh-theme-text);
}

.progress-indicator__track {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--archimesh-theme-surface-muted);
    border-radius: 4px;
    overflow: hidden;
}

.progress-indicator__fill {
    height: 100%;
    background: var(--archimesh-theme-action-gradient);
    border-radius: 4px;
    transition: width 200ms ease-out;
    width: 0%;
}

.progress-indicator__percent {
    font-size: 0.75rem;
    color: var(--archimesh-theme-text-muted);
    align-self: flex-end;
    min-width: 3.5ch;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .progress-indicator__fill {
        transition: none;
    }
}

/* ── Stale Data Refresh ───────────────────────────────────── */

.stale-data-refresh {
    background: var(--archimesh-theme-accent-soft);
    border: 1px solid var(--archimesh-theme-accent);
    color: var(--archimesh-theme-text);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    transition: opacity 200ms ease;
}

.stale-data-refresh[hidden] {
    display: none;
}

.stale-data-refresh--toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
    box-shadow: 0 8px 24px var(--archimesh-theme-shadow);
    z-index: 4000;
    max-width: 360px;
}

.stale-data-refresh__banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stale-data-refresh__message {
    flex: 1;
    color: var(--archimesh-theme-text);
    font-size: 0.875rem;
}

.stale-data-refresh__timestamp {
    color: var(--archimesh-theme-text-muted);
    font-size: 0.75rem;
}

.stale-data-refresh__button {
    background: var(--archimesh-theme-action-gradient);
    color: var(--archimesh-theme-on-accent);
    border: 1px solid var(--archimesh-theme-on-accent-control-border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.stale-data-refresh__button:hover:not(:disabled) {
    background: var(--archimesh-theme-action-gradient-hover);
}

.stale-data-refresh__button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.stale-data-refresh__button:focus-visible {
    outline: 2px solid var(--archimesh-theme-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .stale-data-refresh,
    .stale-data-refresh__button {
        transition: none;
    }
}