/*
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: badges.css
 * @TITLE: Wexford Lodge - Member Portal
 * @DESCRIPTION: Badge and status chip component. Defines semantic status pills (active, inactive, pending, suspended, deceased), role badges, degree badges, and event-type chips. All colours from tokens.css.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.5
 * - File Modified | Ary van der Pijl | 2026/07/16 | QA-070 | Added .badge--constitution- english/--scottish/--irish - translucent pills for the login brand panel's decorative constitution row, referencing the new --color-navy-* / --color-heather-* / * - --color-forest-* scales added to * - tokens.css. 
 * VERSION 1.0.0.4 
 * - File Modified | Ary van der Pijl | 2026/07/12 | A11Y-010 | .badge--resigned/.status-pill--resigned/.status-pill[data-status="resigned"] text colour was var(--color-neutral-500) #737373 on var(--color-neutral-100) #F5F5F5, ~4.34:1 (computed, just under WCAG AA 4.5:1). Changed to the existing var(--color-neutral-600) #525252 token (no new hex introduced), ~7.17:1 - comfortably clears 4.5:1. Left the shared --color-neutral-500 token itself untouched since it is also referenced by print.css outside this defect's scope. |
 * VERSION 1.0.0.3 
 * - File Modified | Ary van der Pijl | 2026/07/11 | CSS-003 | Added --color-purple-* tokens to tokens.css usage site and replaced the duplicated hardcoded #EDE9FE/#5B21B6/#C4B5FD triple (login-action badge + ceremony badge) and the hardcoded #fff on .badge--count with token references. | 
 * VERSION 1.0.0.2 
 * - File Modified | Ary van der Pijl | 2026/06/19 | STANDARDS-COMPLIANCE | Applied ATH Solutions 2026 coding standards. | 
 * VERSION 1.0.0.1 
 * - File Created, Ary van der Pijl, 2026/06/13 
 *================================================================================================================================================================== ! 
 * END CHANGELOG 
*/
/* ─────────────────────────────────────────────────────────────────────────
   BASE BADGE / STATUS PILL
───────────────────────────────────────────────────────────────────────── */
.badge, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* ─────────────────────────────────────────────────────────────────────────
   SEMANTIC STATUS - MEMBER STATUS
───────────────────────────────────────────────────────────────────────── */

.badge--active,
.status-pill--active,
.status-pill[data-status="active"] {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.badge--inactive,
.status-pill--inactive,
.status-pill[data-status="inactive"] {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-300);
}

.badge--pending,
.status-pill--pending,
.status-pill[data-status="pending"] {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.badge--suspended,
.status-pill--suspended,
.status-pill[data-status="suspended"] {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.badge--deceased,
.status-pill--deceased,
.status-pill[data-status="deceased"] {
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-300);
}

.badge--resigned,
.status-pill--resigned,
.status-pill[data-status="resigned"] {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-200);
}

/* ─────────────────────────────────────────────────────────────────────────
   BRAND BADGES
───────────────────────────────────────────────────────────────────────── */

.badge--navy {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.badge--gold {
  background: var(--color-gold-50);
  color: var(--color-gold-800);
  border-color: var(--color-gold-300);
}

/* ─────────────────────────────────────────────────────────────────────────
   CONSTITUTION BADGES
   Translucent pills for use on a dark brand panel (login screen) - not tied
   to the current --color-primary override, since these three are shown
   together regardless of which constitution's theme is actually active.
───────────────────────────────────────────────────────────────────────── */

.badge--constitution-english {
  background: rgba(74, 104, 153, 0.28);
  color: var(--color-navy-100);
  border-color: rgba(123, 155, 189, 0.5);
}

.badge--constitution-scottish {
  background: rgba(154, 107, 185, 0.28);
  color: var(--color-heather-100);
  border-color: rgba(188, 154, 211, 0.5);
}

.badge--constitution-irish {
  background: rgba(75, 144, 117, 0.28);
  color: var(--color-forest-100);
  border-color: rgba(125, 181, 157, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────
   ROLE BADGES
───────────────────────────────────────────────────────────────────────── */

.badge--role {
  background: var(--color-navy-50);
  color: var(--color-navy-700);
  border-color: var(--color-navy-200);
}

/* ─────────────────────────────────────────────────────────────────────────
   PAYMENT / FINANCIAL STATUS
───────────────────────────────────────────────────────────────────────── */

.badge--paid,
.status-pill[data-status="paid"] {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.badge--outstanding,
.status-pill[data-status="outstanding"] {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.badge--overdue,
.status-pill[data-status="overdue"] {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.badge--partial,
.badge--issued,
.status-pill[data-status="partial"],
.status-pill[data-status="issued"] {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.badge--cancelled,
.status-pill[data-status="cancelled"] {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-300);
}

/* ─────────────────────────────────────────────────────────────────────────
   AUDIT ACTION BADGES
───────────────────────────────────────────────────────────────────────── */

.badge[data-action="create"] {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.badge[data-action="update"] {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.badge[data-action="delete"] {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.badge[data-action="login"] {
  background: var(--color-purple-bg);
  color: var(--color-purple-text);
  border-color: var(--color-purple-border);
}

.badge[data-action="logout"] {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-300);
}

/* ─────────────────────────────────────────────────────────────────────────
   RSVP STATUS
───────────────────────────────────────────────────────────────────────── */

.badge--accepted {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.badge--declined {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.badge--tentative {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   MINUTES STATUS
───────────────────────────────────────────────────────────────────────── */

.badge--draft {
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-300);
}

.badge--proposed {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.badge--adopted {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   EVENT TYPE
───────────────────────────────────────────────────────────────────────── */

.badge--meeting {
  background: var(--color-navy-50);
  color: var(--color-navy-700);
  border-color: var(--color-navy-200);
}

.badge--social {
  background: var(--color-gold-50);
  color: var(--color-gold-800);
  border-color: var(--color-gold-200);
}

.badge--ceremony {
  background: var(--color-purple-bg);
  color: var(--color-purple-text);
  border-color: var(--color-purple-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   DOT INDICATOR
───────────────────────────────────────────────────────────────────────── */

.badge--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   NOTIFICATION BADGE (number)
───────────────────────────────────────────────────────────────────────── */

.badge--count {
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  padding: 0 var(--space-1);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}