/* ============================================================================
   File:        _rc-icon-buttons.css
   Purpose:     Authoritative CSS for <RcIconButton> (square icon-only buttons).
                Replaces the scattered icon-button class families previously
                defined inside RcModalHeader.razor.css (::deep .rc-modal-header-action-btn),
                RcNavSection.razor.css (::deep .rc-nav-header-action-btn),
                AdvancedFilterModal.razor.css (.rc-toolbar-toggle), and
                ReportCenterNavFilter.razor.css (.rc-nav-icon-btn).
   Consumes:    --rc-icon-btn-h-*, --rc-icon-btn-svg-*, --rc-icon-btn-radius,
                --rc-icon-btn-border-width, --rc-icon-btn-tone-*-*,
                --rc-control-disabled-opacity, --rc-focus-ring-*,
                --rc-motion-fast. All from _rc-tokens.css.
   Rendered by: Pages/ReportCenter/Components/Shared/RcIconButton.razor
   Loaded via:  <link> in Pages/_Layout.cshtml.
   Layer:       2 (Shared primitives).
   Invariant:   No .rc-icon-btn* selector may appear in any .razor.css file.
   ============================================================================ */

.rc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  var(--rc-icon-btn-h-sm);
    height: var(--rc-icon-btn-h-sm);
    padding: 0;
    border: var(--rc-icon-btn-border-width) solid transparent;
    border-radius: var(--rc-icon-btn-radius);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background-color var(--rc-motion-fast),
                color var(--rc-motion-fast),
                border-color var(--rc-motion-fast);
}

.rc-icon-btn svg {
    width:  var(--rc-icon-btn-svg-sm);
    height: var(--rc-icon-btn-svg-sm);
    flex-shrink: 0;
}

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

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

/* --------------------------------------------------------------------------
   Sizes — independent scale from RcButton (primitive-local density tiers).
   Xs (24px) is intentionally the same as RcButton Xs since they're often
   adjacent. Md (40px) is RcIconButton's upper bound; Md button is 36px.
   -------------------------------------------------------------------------- */
.rc-icon-btn--size-xs { width: var(--rc-icon-btn-h-xs); height: var(--rc-icon-btn-h-xs); }
.rc-icon-btn--size-xs svg { width: var(--rc-icon-btn-svg-xs); height: var(--rc-icon-btn-svg-xs); }
.rc-icon-btn--size-sm { width: var(--rc-icon-btn-h-sm); height: var(--rc-icon-btn-h-sm); }
.rc-icon-btn--size-sm svg { width: var(--rc-icon-btn-svg-sm); height: var(--rc-icon-btn-svg-sm); }
.rc-icon-btn--size-md { width: var(--rc-icon-btn-h-md); height: var(--rc-icon-btn-h-md); }
.rc-icon-btn--size-md svg { width: var(--rc-icon-btn-svg-md); height: var(--rc-icon-btn-svg-md); }

/* --------------------------------------------------------------------------
   Tones — fg (icon color) changes by tone. Hover gets a subtle bg + fg shift.
   -------------------------------------------------------------------------- */
.rc-icon-btn--tone-neutral {
    color: var(--rc-icon-btn-tone-neutral-fg);
}
.rc-icon-btn--tone-neutral:hover:not(:disabled) {
    background: var(--rc-icon-btn-tone-neutral-bg-hover);
    color:      var(--rc-icon-btn-tone-neutral-fg-hover);
}
.rc-icon-btn--tone-primary {
    color: var(--rc-icon-btn-tone-primary-fg);
}
.rc-icon-btn--tone-primary:hover:not(:disabled) {
    background: var(--rc-icon-btn-tone-primary-bg-hover);
    color:      var(--rc-icon-btn-tone-primary-fg-hover);
}

/* --------------------------------------------------------------------------
   Pressed state — aria-pressed="true". Tint primary-ish for a "toggle on"
   feel. Dark surface gets a subtle opacity bump via tokens.
   -------------------------------------------------------------------------- */
.rc-icon-btn[aria-pressed="true"].rc-icon-btn--tone-neutral {
    color:        var(--rc-icon-btn-tone-neutral-fg-pressed);
    border-color: var(--rc-icon-btn-tone-neutral-border-pressed);
    background:   var(--rc-icon-btn-tone-neutral-bg-pressed);
}

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