/* ============================================================================
   BADGES & PILLS — the ONE canonical badge layer for NDR (design system, t304).
   Single source of truth for every pill/badge/chip. Consolidated out of
   tailwind/application.css. No visual change.

   Families (pick ONE semantic modifier per state; never invent a colour inline):
     .badge / .badge-gold / .badge-muted        generic
     .badge-status-{success,warning,info,danger,neutral}   the ONE status pill
     .badge-role-{lending,renting}(-solid)       lending vs renting
     .badge-availability-{yes,no}                available / not-available
     .chip-toggle (+ .chip-toggle-active)        filter-chip / segmented toggle
     .badge-tag / .badge-tag-sm                  small brand-tinted marker tag
     .count-badge                                the "N" count pill
   Status/role badges are never colour-only — always pair with a short label.
   ============================================================================ */

    .badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium; }
    .badge-gold { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-brand-gold text-brand-green-900; }
    .badge-muted { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 ring-1 ring-gray-200; }

    /* STATUS BADGE — the ONE status-pill family (resolved/pending/in-progress/
       denied/closed). Replaces per-feature STATUS_BADGE_* hashes. */
    .badge-status { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset; }
    .badge-status-success { @apply bg-emerald-100 text-emerald-800 ring-emerald-200; }
    .badge-status-warning { @apply bg-amber-100 text-amber-800 ring-amber-200; }
    .badge-status-info    { @apply bg-blue-100 text-blue-800 ring-blue-200; }
    .badge-status-danger  { @apply bg-red-100 text-red-700 ring-red-200; }
    .badge-status-neutral { @apply bg-gray-100 text-gray-600 ring-gray-200; }

    /* ROLE BADGE — Lending (paid TO you) / Renting (paid BY you). Soft tint for
       text rows; -solid for overlay-on-photo placement. */
    .badge-role-lending  { @apply inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-brand-green/10 text-brand-green; }
    .badge-role-renting  { @apply inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-tan-100 text-tan-700; }
    .badge-role-lending-solid { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-brand-green text-white shadow-sm; }
    .badge-role-renting-solid { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-tan-700 text-white shadow-sm; }

    /* Available / Not-available pill (icon reinforces state, never colour-only). */
    .badge-availability-yes { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold text-white bg-brand-green; }
    .badge-availability-no  { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold text-white bg-red-600; }

    /* CHIP TOGGLE — the ONE filter-chip / segmented-toggle pair (pick one of a
       small set). Usage: class: "chip-toggle #{'chip-toggle-active' if selected}". */
    .chip-toggle { @apply inline-flex min-h-11 items-center gap-1.5 rounded-full px-3.5 py-2 text-sm font-medium ring-1 ring-gray-300 bg-white text-gray-700 transition hover:bg-gray-50 hover:ring-brand-gold; }
    .chip-toggle-active { @apply bg-brand-green font-semibold text-white ring-brand-green hover:bg-brand-green; }

    /* Small brand-tinted marker tag (e.g. "Primary" on an address). */
    .badge-tag { @apply inline-flex shrink-0 items-center rounded-full bg-brand-green/10 px-2 py-0.5 text-xs font-medium text-brand-green; }
    .badge-tag-sm { @apply inline-flex shrink-0 items-center rounded-full bg-brand-green/10 px-1.5 py-0.5 text-[10px] font-medium leading-none text-brand-green; }

    /* COUNT-BADGE — the ONE "N" pill next to a heading/label. */
    .count-badge {
        @apply inline-flex min-w-5 items-center justify-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-600 ring-1 ring-inset ring-gray-200;
    }