/* ============================================================================
   File:        _rc-buttons.css
   Purpose:     Authoritative CSS for <RcButton> (text-label box buttons).
                Replaces the ad-hoc `.rc-btn*` class families previously
                defined inside RcModalFooter.razor.css and AdvancedFilterModal
                .razor.css (both deleted in Phase B/C of the variant-API rollout).
   Consumes:    --rc-btn-h-*, --rc-btn-px-*, --rc-btn-fs-*, --rc-btn-gap-*,
                --rc-btn-radius, --rc-btn-border-width, --rc-btn-min-width-md,
                --rc-tone-{neutral|primary}-{solid|outline|ghost}-*,
                --rc-control-disabled-opacity, --rc-focus-ring-*,
                --rc-motion-fast, --rc-btn-badge-*. All from _rc-tokens.css.
   Rendered by: Pages/ReportCenter/Components/Shared/RcButton.razor
   Loaded via:  <link> in Pages/_Layout.cshtml (third in the rc-* block).
   Layer:       2 (Shared primitives).
   Invariant:   No .rc-btn* selector may appear in any .razor.css file. Enforced
                by the inline MSBuild gate in
                Pages/ReportCenter/.tools/ReportCenter.Tooling.targets. Shared
                primitive rules live here only.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Base — applied to every RcButton regardless of variant. Variant modifier
   classes below override color, border, and minor geometry.
   -------------------------------------------------------------------------- */
.rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-btn-gap-md);
    padding: 0 var(--rc-btn-px-md);
    min-height: var(--rc-btn-h-md);
    border-radius: var(--rc-btn-radius);
    border: var(--rc-btn-border-width) solid transparent;
    font-family: inherit;
    font-size: var(--rc-btn-fs-md);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    position: relative;
    transition: background-color var(--rc-motion-fast),
                color var(--rc-motion-fast),
                border-color var(--rc-motion-fast),
                box-shadow var(--rc-motion-fast),
                transform var(--rc-motion-fast);
}

.rc-btn:focus-visible {
    outline: var(--rc-focus-ring-width) solid var(--rc-focus-ring-color);
    outline-offset: var(--rc-focus-ring-offset);
}

.rc-btn:disabled {
    opacity: var(--rc-control-disabled-opacity);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Sizes — density tiers. Md is default; Xs/Sm shrink geometry and font-size.
   -------------------------------------------------------------------------- */
.rc-btn--size-xs {
    min-height: var(--rc-btn-h-xs);
    padding: 0 var(--rc-btn-px-xs);
    font-size: var(--rc-btn-fs-xs);
    gap: var(--rc-btn-gap-xs);
}
.rc-btn--size-sm {
    min-height: var(--rc-btn-h-sm);
    padding: 0 var(--rc-btn-px-sm);
    font-size: var(--rc-btn-fs-sm);
    gap: var(--rc-btn-gap-sm);
}
.rc-btn--size-md {
    /* Defaults apply; rule exists so the mechanical class-name is never "dead". */
    min-height: var(--rc-btn-h-md);
    padding: 0 var(--rc-btn-px-md);
    font-size: var(--rc-btn-fs-md);
    gap: var(--rc-btn-gap-md);
    min-width: var(--rc-btn-min-width-md);
}

/* --------------------------------------------------------------------------
   Forms — chrome treatments. Each form pulls its tone-specific tokens from
   the surface context (:root / .rc-surface-dark), composed via tone modifiers.
   -------------------------------------------------------------------------- */

/* Solid — filled background, contrast text. */
.rc-btn--form-solid.rc-btn--tone-neutral {
    background: var(--rc-tone-neutral-solid-bg);
    color:      var(--rc-tone-neutral-solid-fg);
    border-color: var(--rc-tone-neutral-solid-border);
}
.rc-btn--form-solid.rc-btn--tone-neutral:hover:not(:disabled) {
    background: var(--rc-tone-neutral-solid-bg-hover);
    border-color: var(--rc-tone-neutral-solid-border-hover);
}
.rc-btn--form-solid.rc-btn--tone-primary {
    background: var(--rc-tone-primary-solid-bg);
    color:      var(--rc-tone-primary-solid-fg);
    border-color: var(--rc-tone-primary-solid-border);
}
.rc-btn--form-solid.rc-btn--tone-primary:hover:not(:disabled) {
    background: var(--rc-tone-primary-solid-bg-hover);
    border-color: var(--rc-tone-primary-solid-border-hover);
}

/* Outline — transparent background, visible border, tone-matched text. */
.rc-btn--form-outline {
    background: transparent;
}
.rc-btn--form-outline.rc-btn--tone-neutral {
    color:        var(--rc-tone-neutral-outline-fg);
    border-color: var(--rc-tone-neutral-outline-border);
}
.rc-btn--form-outline.rc-btn--tone-neutral:hover:not(:disabled) {
    background: var(--rc-tone-neutral-outline-bg-hover);
    color:      var(--rc-tone-neutral-outline-fg-hover);
}
.rc-btn--form-outline.rc-btn--tone-primary {
    color:        var(--rc-tone-primary-outline-fg);
    border-color: var(--rc-tone-primary-outline-border);
}
.rc-btn--form-outline.rc-btn--tone-primary:hover:not(:disabled) {
    background: var(--rc-tone-primary-outline-bg-hover);
    color:      var(--rc-tone-primary-outline-fg-hover);
}

/* Ghost — borderless, rest-state bg comes from the surface context so dark-surface
   Clear pill gets a translucent fill (matches pre-migration) while light-surface Ghost
   stays transparent. Hover intensifies. */
.rc-btn--form-ghost {
    border-color: transparent;
}
.rc-btn--form-ghost.rc-btn--tone-neutral {
    background: var(--rc-tone-neutral-ghost-bg-rest);
    color: var(--rc-tone-neutral-ghost-fg);
}
.rc-btn--form-ghost.rc-btn--tone-neutral:hover:not(:disabled) {
    background: var(--rc-tone-neutral-ghost-bg-hover);
    color:      var(--rc-tone-neutral-ghost-fg-hover);
}
.rc-btn--form-ghost.rc-btn--tone-primary {
    background: var(--rc-tone-primary-ghost-bg-rest);
    color: var(--rc-tone-primary-ghost-fg);
}
.rc-btn--form-ghost.rc-btn--tone-primary:hover:not(:disabled) {
    background: var(--rc-tone-primary-ghost-bg-hover);
    color:      var(--rc-tone-primary-ghost-fg-hover);
}

/* --------------------------------------------------------------------------
   Busy state — spinner replaces the interior during an async action. We keep
   the button width stable (min-width-md) so a busy Apply doesn't jump.
   -------------------------------------------------------------------------- */
.rc-btn--busy {
    cursor: wait;
}
.rc-btn--busy .rc-btn__label,
.rc-btn--busy .rc-btn__badge {
    visibility: hidden;
}
.rc-btn--busy::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rc-spin 0.7s linear infinite;
}

/* --------------------------------------------------------------------------
   Badge — tiny count chip inside the button, to the right of the label.
   Preserves the pre-migration rc-btn-badge look (RcModalFooter ApplyCount).
   -------------------------------------------------------------------------- */
.rc-btn__badge {
    background: var(--rc-btn-badge-bg);
    color: var(--rc-btn-badge-fg);
    padding: 0.125rem var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    line-height: 1;
    margin-left: var(--space-1, 0.25rem);
}

/* --------------------------------------------------------------------------
   Mobile — footer buttons stretch full-width. Consumer layouts opt in by
   declaring their own flex container; the primitive doesn't force this.
   The pre-existing RcModalFooter CSS had `.rc-btn { flex: 1; min-height: 36px }`
   inside a @media (max-width: 639.98px) — that layout responsibility is now
   owned by RcModalFooter.razor.css (layout-only scoped rules), not here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rc-btn { transition: none; }
    .rc-btn--busy::before { animation: none; }
}