/**
 * =========================================================================
 * THE CLUB 777° — CENTRALIZED LUCIDE ICONS DESIGN SYSTEM
 * =========================================================================
 * Version 1.56.0 • 100% Locally Hosted • Zero External CDN Dependencies
 * Clean, consistent stroke width, accessible inherited colors & alignments.
 */

.lucide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.125em;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  transition: stroke 0.15s ease, transform 0.15s ease;
}

/* ─── Size Conventions ────────────────────────────────────────── */
.icon-xs {
  width: 14px !important;
  height: 14px !important;
}

.icon-sm {
  width: 16px !important;
  height: 16px !important;
}

.icon-md {
  width: 18px !important;
  height: 18px !important;
}

.icon-lg {
  width: 20px !important;
  height: 20px !important;
}

.icon-xl {
  width: 24px !important;
  height: 24px !important;
}

.icon-2xl {
  width: 32px !important;
  height: 32px !important;
}

/* ─── Spacing & Adjacent Text Alignment ───────────────────────── */
.icon-left {
  margin-right: 0.45rem;
}

.icon-right {
  margin-left: 0.45rem;
}

/* Buttons with icons */
.btn .lucide-icon {
  vertical-align: -0.15em;
}

.btn .lucide-icon:first-child:not(:last-child) {
  margin-right: 0.45rem;
}

.btn .lucide-icon:last-child:not(:first-child) {
  margin-left: 0.45rem;
}

/* Icon-only button touch target */
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
}

/* ─── Status & Accent Modifier Colors ─────────────────────────── */
.icon-primary {
  color: var(--primary, #2563EB);
}

.icon-success {
  color: var(--success, #10B981);
}

.icon-warning {
  color: var(--warning, #F59E0B);
}

.icon-danger {
  color: var(--danger, #EF4444);
}

.icon-muted {
  color: var(--text-muted, #64748B);
}

.icon-gold {
  color: #D97706;
}

/* ─── Navigation Icon Specifics ───────────────────────────────── */
.nav-item .lucide-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.75rem;
  color: var(--text-muted, #64748B);
  transition: color 0.15s ease;
}

.nav-item.active .lucide-icon,
.nav-item:hover .lucide-icon {
  color: var(--primary, #2563EB);
}

.mobile-bottom-nav .lucide-icon {
  width: 22px;
  height: 22px;
  color: var(--text-muted, #64748B);
}

.mobile-nav-link.active .lucide-icon {
  color: var(--primary, #2563EB);
}