/* =========================================================
   LIFTRIX Shared Badges / Status
   全画面共通ステータス・バッジデザイン
========================================================= */

:root{
  /* Badge Shape */
  --liftrix-badge-height: 24px;
  --liftrix-badge-radius: 999px;
  --liftrix-badge-padding-x: 10px;

  /* Default */
  --liftrix-badge-bg: rgba(255,255,255,0.045);
  --liftrix-badge-border: rgba(255,255,255,0.10);
  --liftrix-badge-text: rgba(247,251,255,0.86);

  /* Primary / Active */
  --liftrix-status-primary-bg: rgba(63,169,255,0.12);
  --liftrix-status-primary-border: rgba(63,169,255,0.24);
  --liftrix-status-primary-text: #BFE2FF;

  /* Success */
  --liftrix-status-success-bg: rgba(76,217,124,0.11);
  --liftrix-status-success-border: rgba(76,217,124,0.25);
  --liftrix-status-success-text: #B8FFD4;

  /* Warning */
  --liftrix-status-warning-bg: rgba(255,193,7,0.12);
  --liftrix-status-warning-border: rgba(255,193,7,0.26);
  --liftrix-status-warning-text: #FFE49A;

  /* Danger */
  --liftrix-status-danger-bg: rgba(255,92,112,0.11);
  --liftrix-status-danger-border: rgba(255,92,112,0.28);
  --liftrix-status-danger-text: #FFB5BE;

  /* Muted */
  --liftrix-status-muted-bg: rgba(255,255,255,0.035);
  --liftrix-status-muted-border: rgba(255,255,255,0.08);
  --liftrix-status-muted-text: rgba(221,233,255,0.54);
}

/* =========================================================
   New Badge Classes
   新規画面ではこのクラスを使う
========================================================= */

.liftrixBadge{
  min-height: var(--liftrix-badge-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 0 var(--liftrix-badge-padding-x);
  border-radius: var(--liftrix-badge-radius);

  color: var(--liftrix-badge-text);
  border: 1px solid var(--liftrix-badge-border);
  background: var(--liftrix-badge-bg);

  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.liftrixBadge--primary,
.liftrixBadge--active{
  color: var(--liftrix-status-primary-text);
  border-color: var(--liftrix-status-primary-border);
  background: var(--liftrix-status-primary-bg);
}

.liftrixBadge--success{
  color: var(--liftrix-status-success-text);
  border-color: var(--liftrix-status-success-border);
  background: var(--liftrix-status-success-bg);
}

.liftrixBadge--warning{
  color: var(--liftrix-status-warning-text);
  border-color: var(--liftrix-status-warning-border);
  background: var(--liftrix-status-warning-bg);
}

.liftrixBadge--danger,
.liftrixBadge--inactive{
  color: var(--liftrix-status-danger-text);
  border-color: var(--liftrix-status-danger-border);
  background: var(--liftrix-status-danger-bg);
}

.liftrixBadge--muted{
  color: var(--liftrix-status-muted-text);
  border-color: var(--liftrix-status-muted-border);
  background: var(--liftrix-status-muted-bg);
}

/* =========================================================
   Existing Safe Compatibility
   既存バッジ・ステータスの色味だけ統一
========================================================= */

.clientStatusBadge,
.trainerStatusBadge,
.statusBadge,
.badge,
.pill,
.clientPill,
.requiredPill,
.optionalPill,
.previewType,
.miniStat{
  border-radius: var(--liftrix-badge-radius);
  font-weight: 900;
  white-space: nowrap;
}

/* Active / 有効 */
.clientStatusBadge--active,
.trainerStatusBadge--active,
.statusBadge--active,
.badge--active,
.pill--active,
.is-active .statusBadge{
  color: var(--liftrix-status-success-text);
  border-color: var(--liftrix-status-success-border);
  background: var(--liftrix-status-success-bg);
}

/* Inactive / 休会 / 無効 */
.clientStatusBadge--inactive,
.trainerStatusBadge--inactive,
.statusBadge--inactive,
.badge--inactive,
.pill--inactive{
  color: var(--liftrix-status-danger-text);
  border-color: var(--liftrix-status-danger-border);
  background: var(--liftrix-status-danger-bg);
}

/* Primary / 選択中 / 通常ステータス */
.clientPill,
.statusBadge--primary,
.badge--primary,
.pill--primary,
.previewType{
  color: var(--liftrix-status-primary-text);
  border-color: var(--liftrix-status-primary-border);
  background: var(--liftrix-status-primary-bg);
}

/* Required */
.requiredPill{
  color: var(--liftrix-status-danger-text);
  border-color: var(--liftrix-status-danger-border);
  background: var(--liftrix-status-danger-bg);
}

/* Optional */
.optionalPill,
.miniStat{
  color: var(--liftrix-status-muted-text);
  border-color: var(--liftrix-status-muted-border);
  background: var(--liftrix-status-muted-bg);
}

/* Success / Saved */
.successBadge,
.savedBadge,
.statusBadge--success,
.badge--success,
.pill--success{
  color: var(--liftrix-status-success-text);
  border-color: var(--liftrix-status-success-border);
  background: var(--liftrix-status-success-bg);
}

/* Warning */
.warningBadge,
.statusBadge--warning,
.badge--warning,
.pill--warning{
  color: var(--liftrix-status-warning-text);
  border-color: var(--liftrix-status-warning-border);
  background: var(--liftrix-status-warning-bg);
}

/* Danger */
.dangerBadge,
.errorBadge,
.statusBadge--danger,
.badge--danger,
.pill--danger{
  color: var(--liftrix-status-danger-text);
  border-color: var(--liftrix-status-danger-border);
  background: var(--liftrix-status-danger-bg);
}

/* =========================================================
   Dot Status
========================================================= */

.liftrixStatusDot{
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
  background: var(--liftrix-status-muted-text);
}

.liftrixStatusDot--success{
  background: #4CD97C;
}

.liftrixStatusDot--warning{
  background: #FFC107;
}

.liftrixStatusDot--danger{
  background: #FF5C70;
}

.liftrixStatusDot--primary{
  background: #3FA9FF;
}

/* =========================================================
   Safety Notes
   以下は意図的に指定しない:
   position
   display block/grid
   width / max-width
   margin
========================================================= */

/* =========================================================
   Legacy Badge Compatibility
   app_ui.css から移管
========================================================= */

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
}

.badge-success{
  color:var(--success);
  border-color:rgba(120, 220, 160, 0.20);
}

.badge-danger{
  color:var(--danger-soft);
  border-color:rgba(255, 125, 135, 0.20);
}