/* ============================================================================
   File:        _rc-pills.css
   Purpose:     Authoritative CSS for <RcPill> (count / status / selectable
                chip primitive). Replaces .rc-metric-pill* (AdvancedFilterModal)
                and .rc-location-pill--more (RcReportCenterContent).
   Consumes:    --rc-pill-h-*, --rc-pill-px-*, --rc-pill-fs-*, --rc-pill-gap,
                --rc-pill-radius, --rc-pill-border-width,
                --rc-pill-tone-{neutral|primary}-{soft|outline}-*,
                --rc-control-disabled-opacity, --rc-focus-ring-*,
                --rc-motion-fast. All from _rc-tokens.css.
   Rendered by: Pages/ReportCenter/Components/Shared/RcPill.razor
   Loaded via:  <link> in Pages/_Layout.cshtml.
   Layer:       2 (Shared primitives).
   Invariant:   No .rc-pill* selector may appear in any .razor.css file.

   Element notes:
     - When IsInteractive=false, RcPill renders as <span class="rc-pill ...">.
       These rules target the base class, so they apply equally.
     - When IsInteractive=true, RcPill renders as <button class="rc-pill rc-pill--interactive ...">.
       Button-specific rules (cursor, focus) are under .rc-pill--interactive.
   ============================================================================ */

.rc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-pill-gap);
    height: var(--rc-pill-h-sm);
    padding: 0 var(--rc-pill-px-sm);
    border: var(--rc-pill-border-width) solid transparent;
    border-radius: var(--rc-pill-radius);
    font-family: inherit;
    font-size: var(--rc-pill-fs-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--rc-motion-fast),
                color var(--rc-motion-fast),
                border-color var(--rc-motion-fast);
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */
.rc-pill--size-xs {
    height: var(--rc-pill-h-xs);
    padding: 0 var(--rc-pill-px-xs);
    font-size: var(--rc-pill-fs-xs);
}
.rc-pill--size-sm {
    height: var(--rc-pill-h-sm);
    padding: 0 var(--rc-pill-px-sm);
    font-size: var(--rc-pill-fs-sm);
}

/* --------------------------------------------------------------------------
   Forms × tones
   -------------------------------------------------------------------------- */

/* Soft — tinted background, matching tone text. Default form. */
.rc-pill--form-soft.rc-pill--tone-neutral {
    background: var(--rc-pill-tone-neutral-soft-bg);
    color:      var(--rc-pill-tone-neutral-soft-fg);
}
.rc-pill--form-soft.rc-pill--tone-primary {
    background: var(--rc-pill-tone-primary-soft-bg);
    color:      var(--rc-pill-tone-primary-soft-fg);
}

/* Outline — dashed-ish border, transparent bg, hover fills. Used by
   rc-location-pill--more which used a dashed border; we keep it dashed
   because the "More" affordance reads as incomplete/actionable. */
.rc-pill--form-outline {
    background: transparent;
    border-style: dashed;
}
.rc-pill--form-outline.rc-pill--tone-neutral {
    color:        var(--rc-pill-tone-neutral-outline-fg);
    border-color: var(--rc-pill-tone-neutral-outline-border);
}
.rc-pill--form-outline.rc-pill--tone-primary {
    color:        var(--rc-pill-tone-primary-outline-fg);
    border-color: var(--rc-pill-tone-primary-outline-border);
}

/* --------------------------------------------------------------------------
   Interactive — when IsInteractive=true, pill is a <button>. Add cursor,
   focus-visible ring, and hover tints. Non-interactive <span> pills never
   hover.
   -------------------------------------------------------------------------- */
.rc-pill--interactive {
    cursor: pointer;
    border-width: var(--rc-pill-border-width);
    /* Reset default button chrome without losing tone. */
    font-family: inherit;
}

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

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

.rc-pill--interactive.rc-pill--form-soft.rc-pill--tone-neutral:hover:not(:disabled) {
    background: var(--rc-pill-tone-neutral-soft-bg-hover);
    color:      var(--rc-pill-tone-neutral-soft-fg-hover);
}
.rc-pill--interactive.rc-pill--form-soft.rc-pill--tone-primary:hover:not(:disabled) {
    background: var(--rc-pill-tone-primary-soft-bg-hover);
    color:      var(--rc-pill-tone-primary-soft-fg-hover);
}
.rc-pill--interactive.rc-pill--form-outline.rc-pill--tone-neutral:hover:not(:disabled) {
    background: var(--rc-pill-tone-neutral-outline-bg-hover);
    color:      var(--rc-pill-tone-neutral-outline-fg-hover);
}
.rc-pill--interactive.rc-pill--form-outline.rc-pill--tone-primary:hover:not(:disabled) {
    background: var(--rc-pill-tone-primary-outline-bg-hover);
    color:      var(--rc-pill-tone-primary-outline-fg-hover);
}

/* --------------------------------------------------------------------------
   Icon + label slots (rendered by RcPill.razor when Icon fragment is set).
   Icon sits before label with the pill-gap between them. The icon span is
   inline-flex so an SVG child centers vertically regardless of pill height.
   -------------------------------------------------------------------------- */
.rc-pill__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.rc-pill__label {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

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