/**
 * Global status pills
 * 1) Dark-mode fallbacks for light-only Tailwind status pills (bg-*-100 + text-*-800)
 * 2) Canonical booking / order status-badge semantic map (host + renter)
 *
 * Label truth remains in booking_status.py / display status service.
 * One status key = one color site-wide. Prefer these classes over ad-hoc Tailwind fills.
 */

/* ---------------------------------------------------------------------------
 * Tailwind light-only pill dark fallbacks (legacy ui_macros / inline chips)
 * --------------------------------------------------------------------------- */

.dark .bg-blue-100.text-blue-800,
.dark .bg-blue-100.text-blue-900,
html.dark .bg-blue-100.text-blue-800,
html.dark .bg-blue-100.text-blue-900 {
  background-color: rgb(30 58 138 / 0.45) !important;
  color: rgb(191 219 254) !important;
}

.dark .bg-green-100.text-green-800,
html.dark .bg-green-100.text-green-800 {
  background-color: rgb(20 83 45 / 0.45) !important;
  color: rgb(134 239 172) !important;
}

.dark .bg-amber-100.text-amber-800,
.dark .bg-yellow-100.text-yellow-800,
html.dark .bg-amber-100.text-amber-800,
html.dark .bg-yellow-100.text-yellow-800 {
  background-color: rgb(120 53 15 / 0.45) !important;
  color: rgb(253 230 138) !important;
}

.dark .bg-red-100.text-red-800,
html.dark .bg-red-100.text-red-800 {
  background-color: rgb(127 29 29 / 0.45) !important;
  color: rgb(252 165 165) !important;
}

.dark .bg-purple-100.text-purple-700,
.dark .bg-purple-100.text-purple-800,
html.dark .bg-purple-100.text-purple-700,
html.dark .bg-purple-100.text-purple-800 {
  background-color: rgb(88 28 135 / 0.4) !important;
  color: rgb(216 180 254) !important;
}

.dark .bg-gray-100.text-gray-800,
.dark .bg-stone-100.text-stone-900,
html.dark .bg-gray-100.text-gray-800,
html.dark .bg-stone-100.text-stone-900 {
  background-color: rgb(51 65 85 / 0.55) !important;
  color: rgb(226 232 240) !important;
}

/* ---------------------------------------------------------------------------
 * Canonical booking / order status badges
 * Active green · Upcoming/confirmed blue · Confirming sky · Pending amber ·
 * Completed slate · Cancel/fail red · Refund rose · Expired muted slate
 * --------------------------------------------------------------------------- */

.status-badge,
.booking-status-badge,
.host-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: none;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  white-space: nowrap;
}

.status-badge.status-badge--compact,
.host-status-badge.status-badge--compact {
  padding: 0.1875rem 0.5625rem;
  font-size: 0.6875rem;
}

.status-badge.status-badge-large,
.status-badge.status-badge--large,
.booking-status-badge-standalone.status-badge-large {
  padding: 0.4rem 0.95rem 0.4rem 0.72rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.status-badge.status-badge--live {
  display: inline-flex;
  align-items: center;
}

.host-order-status-dot,
.status-badge__dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.125rem;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
  vertical-align: 0.05em;
}

/* Default / unknown */
.status-badge,
.booking-status-badge,
.host-status-badge {
  background: #f8fafc;
  color: #475569;
  border-color: rgba(148, 163, 184, 0.35);
}

/* Upcoming / Confirmed — calm blue (future, not live) */
.status-badge.status-confirmed,
.status-badge.status-upcoming,
.booking-status-badge.status-confirmed,
.booking-status-badge.status-upcoming,
.host-status-badge.status-confirmed,
.host-status-badge.status-upcoming {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.28);
}

/* Confirming — pending + paid/authorized */
.status-badge.status-confirming,
.booking-status-badge.status-confirming,
.host-status-badge.status-confirming,
.host-status-badge.host-status-badge--confirming {
  background: #f0f9ff;
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.32);
}

/* Active — in progress, green live signal */
.status-badge.status-active,
.booking-status-badge.status-active,
.host-status-badge.status-active,
.host-status-badge.host-status-badge--active {
  background: #ecfdf5;
  color: #047857;
  border-color: rgba(16, 185, 129, 0.28);
}

/* Awaiting payment / pending */
.status-badge.status-pending,
.booking-status-badge.status-pending,
.host-status-badge.status-pending,
.host-status-badge.host-status-badge--awaiting_payment {
  background: #fffbeb;
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
}

/* Completed — quiet slate */
.status-badge.status-completed,
.booking-status-badge.status-completed,
.host-status-badge.status-completed,
.host-status-badge.host-status-badge--completed {
  background: #f1f5f9;
  color: #475569;
  border-color: rgba(148, 163, 184, 0.35);
}

/* Cancelled / Failed */
.status-badge.status-cancelled,
.status-badge.status-failed,
.booking-status-badge.status-cancelled,
.booking-status-badge.status-failed,
.host-status-badge.status-cancelled,
.host-status-badge.status-failed,
.host-status-badge.host-status-badge--cancelled,
.host-status-badge.host-status-badge--failed {
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(248, 113, 113, 0.32);
}

/* Refunded — muted rose (not success green) */
.status-badge.status-refunded,
.status-badge.status-partially_refunded,
.booking-status-badge.status-refunded,
.booking-status-badge.status-partially_refunded,
.host-status-badge.status-refunded,
.host-status-badge.status-partially_refunded,
.host-status-badge.host-status-badge--payment_refund {
  background: #fff1f2;
  color: #be123c;
  border-color: rgba(244, 63, 94, 0.28);
}

/* Expired */
.status-badge.status-expired,
.booking-status-badge.status-expired,
.host-status-badge.status-expired,
.host-status-badge.host-status-badge--expired {
  background: #f8fafc;
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.35);
}

/* Payment paid (when used as status-paid badge) */
.status-badge.status-paid,
.booking-status-badge.status-paid,
.host-status-badge.status-paid,
.host-status-badge.host-status-badge--payment_paid {
  background: #ecfdf5;
  color: #047857;
  border-color: rgba(16, 185, 129, 0.28);
}

.host-status-badge.host-status-badge--payment_pending {
  background: #fffbeb;
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
}

.host-status-badge.host-status-badge--refund_amount {
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(248, 113, 113, 0.32);
}

/* Dark mode */
.dark .status-badge,
.dark .booking-status-badge,
.dark .host-status-badge,
html.dark .status-badge,
html.dark .booking-status-badge,
html.dark .host-status-badge {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .status-badge.status-confirmed,
.dark .status-badge.status-upcoming,
.dark .booking-status-badge.status-confirmed,
.dark .booking-status-badge.status-upcoming,
.dark .host-status-badge.status-confirmed,
.dark .host-status-badge.status-upcoming,
html.dark .status-badge.status-confirmed,
html.dark .status-badge.status-upcoming,
html.dark .booking-status-badge.status-confirmed,
html.dark .booking-status-badge.status-upcoming,
html.dark .host-status-badge.status-confirmed,
html.dark .host-status-badge.status-upcoming {
  background: rgba(30, 58, 138, 0.42);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.dark .status-badge.status-confirming,
.dark .booking-status-badge.status-confirming,
.dark .host-status-badge.status-confirming,
.dark .host-status-badge.host-status-badge--confirming,
html.dark .status-badge.status-confirming,
html.dark .booking-status-badge.status-confirming,
html.dark .host-status-badge.status-confirming,
html.dark .host-status-badge.host-status-badge--confirming {
  background: rgba(7, 89, 133, 0.42);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.38);
}

.dark .status-badge.status-active,
.dark .booking-status-badge.status-active,
.dark .host-status-badge.status-active,
.dark .host-status-badge.host-status-badge--active,
html.dark .status-badge.status-active,
html.dark .booking-status-badge.status-active,
html.dark .host-status-badge.status-active,
html.dark .host-status-badge.host-status-badge--active {
  background: rgba(6, 78, 59, 0.45);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}

.dark .status-badge.status-pending,
.dark .booking-status-badge.status-pending,
.dark .host-status-badge.status-pending,
.dark .host-status-badge.host-status-badge--awaiting_payment,
html.dark .status-badge.status-pending,
html.dark .booking-status-badge.status-pending,
html.dark .host-status-badge.status-pending,
html.dark .host-status-badge.host-status-badge--awaiting_payment {
  background: rgba(120, 53, 15, 0.42);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.dark .status-badge.status-completed,
.dark .booking-status-badge.status-completed,
.dark .host-status-badge.status-completed,
.dark .host-status-badge.host-status-badge--completed,
html.dark .status-badge.status-completed,
html.dark .booking-status-badge.status-completed,
html.dark .host-status-badge.status-completed,
html.dark .host-status-badge.host-status-badge--completed {
  background: rgba(51, 65, 85, 0.55);
  color: #cbd5e1;
  border-color: rgba(100, 116, 139, 0.4);
}

.dark .status-badge.status-cancelled,
.dark .status-badge.status-failed,
.dark .booking-status-badge.status-cancelled,
.dark .booking-status-badge.status-failed,
.dark .host-status-badge.status-cancelled,
.dark .host-status-badge.status-failed,
.dark .host-status-badge.host-status-badge--cancelled,
.dark .host-status-badge.host-status-badge--failed,
html.dark .status-badge.status-cancelled,
html.dark .status-badge.status-failed,
html.dark .booking-status-badge.status-cancelled,
html.dark .booking-status-badge.status-failed,
html.dark .host-status-badge.status-cancelled,
html.dark .host-status-badge.status-failed,
html.dark .host-status-badge.host-status-badge--cancelled,
html.dark .host-status-badge.host-status-badge--failed {
  background: rgba(127, 29, 29, 0.42);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}

.dark .status-badge.status-refunded,
.dark .status-badge.status-partially_refunded,
.dark .booking-status-badge.status-refunded,
.dark .booking-status-badge.status-partially_refunded,
.dark .host-status-badge.status-refunded,
.dark .host-status-badge.status-partially_refunded,
.dark .host-status-badge.host-status-badge--payment_refund,
html.dark .status-badge.status-refunded,
html.dark .status-badge.status-partially_refunded,
html.dark .booking-status-badge.status-refunded,
html.dark .booking-status-badge.status-partially_refunded,
html.dark .host-status-badge.status-refunded,
html.dark .host-status-badge.status-partially_refunded,
html.dark .host-status-badge.host-status-badge--payment_refund {
  background: rgba(136, 19, 55, 0.4);
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.35);
}

.dark .status-badge.status-expired,
.dark .booking-status-badge.status-expired,
.dark .host-status-badge.status-expired,
.dark .host-status-badge.host-status-badge--expired,
html.dark .status-badge.status-expired,
html.dark .booking-status-badge.status-expired,
html.dark .host-status-badge.status-expired,
html.dark .host-status-badge.host-status-badge--expired {
  background: rgba(51, 65, 85, 0.55);
  color: #cbd5e1;
  border-color: rgba(100, 116, 139, 0.4);
}

.dark .status-badge.status-paid,
.dark .booking-status-badge.status-paid,
.dark .host-status-badge.status-paid,
.dark .host-status-badge.host-status-badge--payment_paid,
html.dark .status-badge.status-paid,
html.dark .booking-status-badge.status-paid,
html.dark .host-status-badge.status-paid,
html.dark .host-status-badge.host-status-badge--payment_paid {
  background: rgba(6, 78, 59, 0.45);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}

.dark .host-status-badge.host-status-badge--payment_pending,
html.dark .host-status-badge.host-status-badge--payment_pending {
  background: rgba(120, 53, 15, 0.42);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.dark .host-status-badge.host-status-badge--refund_amount,
html.dark .host-status-badge.host-status-badge--refund_amount {
  background: rgba(127, 29, 29, 0.42);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}