/**
 * Funky.Badge Styles
 * 
 * Generic badge styling for count/status indicators.
 * Used by QuickNav, Tabs, DataTables, ActionBar, and other components.
 */

/* ==========================================================================
   Base Badge
   ========================================================================== */

.funky-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pro-font-size-xs, 0.65rem);
  font-weight: var(--pro-font-weight-bold, 600);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--pro-border-radius-full, 9999px);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.2s var(--pro-transition-timing, ease-out),
              opacity 0.2s var(--pro-transition-timing, ease-out);
}

/* ==========================================================================
   Position Variants
   ========================================================================== */

.funky-badge--top-right {
  top: -4px;
  right: -4px;
}

.funky-badge--top-left {
  top: -4px;
  left: -4px;
}

.funky-badge--bottom-right {
  bottom: -4px;
  right: -4px;
}

.funky-badge--bottom-left {
  bottom: -4px;
  left: -4px;
}

.funky-badge--center {
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
}

/* ==========================================================================
   Type Variants
   ========================================================================== */

/* Count Badge (default) */
.funky-badge--count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--pro-danger, #dc3545);
  color: var(--pro-danger-contrast, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Large Badge (for overflow numbers like 99+) */
.funky-badge--large {
  min-width: 24px;
  padding: 0 6px;
  font-size: var(--pro-font-size-2xs, 0.6rem);
}

/* Dot Badge */
.funky-badge--dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  background-color: var(--pro-danger, #dc3545);
  box-shadow: 0 0 0 2px var(--pro-bg-surface, #ffffff);
}

/* Warning Badge */
.funky-badge--warning {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--pro-warning, #ffc107);
  color: var(--pro-warning-contrast, #212529);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Success Badge */
.funky-badge--success {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--pro-success, #28a745);
  color: var(--pro-success-contrast, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Info Badge */
.funky-badge--info {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--pro-info, #17a2b8);
  color: var(--pro-info-contrast, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Animation
   ========================================================================== */

.funky-badge--animate {
  animation: funky-badge-pulse 0.4s ease-out;
}

@keyframes funky-badge-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .funky-badge--animate {
    animation: none;
  }
  
  .funky-badge {
    transition: none;
  }
}

/* ==========================================================================
   Theme Variations
   ========================================================================== */

/* Dark theme adjustments */
[data-theme="dark"] .funky-badge--dot {
  box-shadow: 0 0 0 2px var(--pro-bg-surface, #1a1a2e);
}

/* High contrast mode */
@media (forced-colors: active) {
  .funky-badge {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
}

/* ==========================================================================
   Density Modes
   ========================================================================== */

/* Compact density */
[data-density="compact"] .funky-badge--count,
[data-density="compact"] .funky-badge--warning,
[data-density="compact"] .funky-badge--success,
[data-density="compact"] .funky-badge--info {
  min-width: 16px;
  height: 16px;
  font-size: 0.6rem;
  padding: 0 4px;
}

[data-density="compact"] .funky-badge--dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
}

[data-density="compact"] .funky-badge--large {
  min-width: 20px;
  padding: 0 5px;
}

/* Comfortable density */
[data-density="comfortable"] .funky-badge--count,
[data-density="comfortable"] .funky-badge--warning,
[data-density="comfortable"] .funky-badge--success,
[data-density="comfortable"] .funky-badge--info {
  min-width: 20px;
  height: 20px;
  font-size: 0.7rem;
  padding: 0 6px;
}

[data-density="comfortable"] .funky-badge--dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
}

[data-density="comfortable"] .funky-badge--large {
  min-width: 26px;
  padding: 0 7px;
}

/* ==========================================================================
   Playground Demo Styles
   ========================================================================== */

.badge-demo__type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.badge-demo__target-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.badge-demo__target {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.badge-demo__label {
  font-size: var(--pro-font-size-sm, 0.875rem);
  color: var(--pro-text-muted, #6c757d);
}

.badge-demo__interactive {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.badge-demo__main-target {
  position: relative;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.badge-demo__api-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.badge-demo__position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 400px;
  margin: 0 auto;
}

.badge-demo__position-target {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background-color: var(--pro-bg-tertiary, #f8f9fa);
  border: 1px solid var(--pro-border, #dee2e6);
  border-radius: var(--pro-border-radius, 0.375rem);
}

.badge-demo__position-label {
  font-size: var(--pro-font-size-xs, 0.75rem);
  color: var(--pro-text-muted, #6c757d);
  white-space: nowrap;
}

.badge-demo__pubsub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.badge-demo__pubsub-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.badge-demo__pubsub-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--pro-bg-tertiary, #f8f9fa);
  border: 1px solid var(--pro-border, #dee2e6);
  border-radius: var(--pro-border-radius, 0.375rem);
  color: var(--pro-text, #212529);
}

.badge-demo__pubsub-label {
  font-size: var(--pro-font-size-base, 1rem);
  color: var(--pro-text, #212529);
}

.badge-demo__state {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.badge-demo__state-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--pro-bg-tertiary, #f8f9fa);
  border-radius: var(--pro-border-radius, 0.375rem);
}

.badge-demo__state-label {
  font-weight: var(--pro-font-weight-medium, 500);
  color: var(--pro-text-muted, #6c757d);
}

.badge-demo__state-value {
  font-family: var(--pro-font-mono, monospace);
  color: var(--pro-text);
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .badge-demo__position-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .badge-demo__api-grid {
    flex-direction: column;
  }

  .badge-demo__api-grid .btn {
    width: 100%;
  }

  .badge-demo__pubsub {
    flex-direction: column;
  }
}