@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/components/badges.css
| الوصف:
|   أنماط الشارات والوسوم والعدادات المشتركة في المنصة.
|
| الهدف:
|   - توحيد شكل وسلوك badges و status labels و counters.
|   - توفير أحجام وأنواع وحالات متعددة للشارات.
|   - دعم الحالات الدلالية مثل النجاح والتحذير والخطأ والمعلومة.
|   - دعم الشارات النصية، الأيقونية، الدائرية، والعددية.
|
| القواعد:
|   - هذا الملف خاص بالشارات والوسوم فقط.
|   - لا توضع فيه أنماط صفحات.
|   - لا توضع فيه أنماط layout عامة.
|   - يعتمد على tokens.css و base.css.
|--------------------------------------------------------------------------
*/

/* -------------------------------------------------------------------------
 * Base Badge
 * ---------------------------------------------------------------------- */
.badge {
  --badge-bg: var(--color-gray-100);
  --badge-border: transparent;
  --badge-text: var(--color-text-primary);
  --badge-icon: currentColor;
  --badge-height: 1.75rem;
  --badge-padding-x: var(--space-3);
  --badge-gap: var(--space-2);
  --badge-radius: var(--radius-full);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semi-bold);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap);
  min-height: var(--badge-height);
  max-width: 100%;
  padding: 0 var(--badge-padding-x);
  color: var(--badge-text);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--badge-bg);
  border: var(--border-width-1) solid var(--badge-border);
  border-radius: var(--badge-radius);
}

.badge > * {
  min-width: 0;
}

.badge__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge__icon,
.badge > svg,
.badge > img {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--badge-icon);
  flex-shrink: 0;
}

.badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: currentColor;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Variants
 * ---------------------------------------------------------------------- */
.badge--neutral {
  --badge-bg: var(--color-gray-100);
  --badge-border: transparent;
  --badge-text: var(--color-gray-700);
}

.badge--brand {
  --badge-bg: var(--color-brand-50);
  --badge-border: transparent;
  --badge-text: var(--color-brand-700);
}

.badge--success {
  --badge-bg: var(--color-success-50);
  --badge-border: transparent;
  --badge-text: var(--color-success-700);
}

.badge--warning {
  --badge-bg: var(--color-warning-50);
  --badge-border: transparent;
  --badge-text: var(--color-warning-700);
}

.badge--danger,
.badge--error {
  --badge-bg: var(--color-danger-50);
  --badge-border: transparent;
  --badge-text: var(--color-danger-700);
}

.badge--info {
  --badge-bg: var(--color-info-50);
  --badge-border: transparent;
  --badge-text: var(--color-info-700);
}

/* -------------------------------------------------------------------------
 * Outline Variants
 * ---------------------------------------------------------------------- */
.badge--outline {
  background-color: transparent;
}

.badge--outline.badge--neutral {
  --badge-border: var(--color-border-strong);
  --badge-text: var(--color-text-secondary);
}

.badge--outline.badge--brand {
  --badge-border: var(--color-border-brand);
  --badge-text: var(--color-brand-700);
}

.badge--outline.badge--success {
  --badge-border: var(--color-border-success);
  --badge-text: var(--color-success-700);
}

.badge--outline.badge--warning {
  --badge-border: var(--color-border-warning);
  --badge-text: var(--color-warning-700);
}

.badge--outline.badge--danger,
.badge--outline.badge--error {
  --badge-border: var(--color-border-danger);
  --badge-text: var(--color-danger-700);
}

.badge--outline.badge--info {
  --badge-border: var(--color-border-info);
  --badge-text: var(--color-info-700);
}

/* -------------------------------------------------------------------------
 * Solid Variants
 * ---------------------------------------------------------------------- */
.badge--solid.badge--neutral {
  --badge-bg: var(--color-gray-700);
  --badge-border: var(--color-gray-700);
  --badge-text: var(--color-white);
}

.badge--solid.badge--brand {
  --badge-bg: var(--color-brand-600);
  --badge-border: var(--color-brand-600);
  --badge-text: var(--color-white);
}

.badge--solid.badge--success {
  --badge-bg: var(--color-success-600);
  --badge-border: var(--color-success-600);
  --badge-text: var(--color-white);
}

.badge--solid.badge--warning {
  --badge-bg: var(--color-warning-600);
  --badge-border: var(--color-warning-600);
  --badge-text: var(--color-white);
}

.badge--solid.badge--danger,
.badge--solid.badge--error {
  --badge-bg: var(--color-danger-600);
  --badge-border: var(--color-danger-600);
  --badge-text: var(--color-white);
}

.badge--solid.badge--info {
  --badge-bg: var(--color-info-600);
  --badge-border: var(--color-info-600);
  --badge-text: var(--color-white);
}

/* -------------------------------------------------------------------------
 * Soft Variant
 * ---------------------------------------------------------------------- */
.badge--soft {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* -------------------------------------------------------------------------
 * Sizes
 * ---------------------------------------------------------------------- */
.badge--sm {
  --badge-height: 1.5rem;
  --badge-padding-x: var(--space-2);
  --badge-gap: var(--space-1);
  --badge-font-size: 0.6875rem;
}

.badge--md {
  --badge-height: 1.75rem;
  --badge-padding-x: var(--space-3);
  --badge-gap: var(--space-2);
  --badge-font-size: var(--font-size-xs);
}

.badge--lg {
  --badge-height: 2rem;
  --badge-padding-x: var(--space-4);
  --badge-gap: var(--space-2);
  --badge-font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------------------
 * Shape Modifiers
 * ---------------------------------------------------------------------- */
.badge--pill {
  --badge-radius: var(--radius-full);
}

.badge--rounded {
  --badge-radius: var(--radius-md);
}

.badge--square {
  --badge-radius: var(--radius-sm);
}

.badge--icon-only {
  width: var(--badge-height);
  min-width: var(--badge-height);
  padding: 0;
}

.badge--dot-only {
  width: 0.75rem;
  min-width: 0.75rem;
  height: 0.75rem;
  min-height: 0.75rem;
  padding: 0;
  border-radius: var(--radius-full);
}

.badge--dot-only .badge__dot {
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------
 * Status Badge
 * ---------------------------------------------------------------------- */
.status-badge {
  --status-dot-color: var(--color-gray-400);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 1.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

.status-badge__dot {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--status-dot-color);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-badge__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge--neutral {
  --status-dot-color: var(--color-gray-400);
}

.status-badge--brand {
  --status-dot-color: var(--color-brand-600);
}

.status-badge--success {
  --status-dot-color: var(--color-success-600);
}

.status-badge--warning {
  --status-dot-color: var(--color-warning-500);
}

.status-badge--danger,
.status-badge--error {
  --status-dot-color: var(--color-danger-600);
}

.status-badge--info {
  --status-dot-color: var(--color-info-600);
}

/* -------------------------------------------------------------------------
 * Count Badge
 * ---------------------------------------------------------------------- */
.count-badge {
  --count-badge-bg: var(--color-danger-600);
  --count-badge-text: var(--color-white);
  --count-badge-size: 1.25rem;
  --count-badge-min-width: 1.25rem;
  --count-badge-font-size: 0.6875rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--count-badge-min-width);
  height: var(--count-badge-size);
  padding-inline: 0.3125rem;
  color: var(--count-badge-text);
  font-size: var(--count-badge-font-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  background-color: var(--count-badge-bg);
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
}

.count-badge--neutral {
  --count-badge-bg: var(--color-gray-700);
}

.count-badge--brand {
  --count-badge-bg: var(--color-brand-600);
}

.count-badge--success {
  --count-badge-bg: var(--color-success-600);
}

.count-badge--warning {
  --count-badge-bg: var(--color-warning-600);
}

.count-badge--danger,
.count-badge--error {
  --count-badge-bg: var(--color-danger-600);
}

.count-badge--info {
  --count-badge-bg: var(--color-info-600);
}

/* -------------------------------------------------------------------------
 * Badge Group
 * ---------------------------------------------------------------------- */
.badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  max-width: 100%;
}

.badge-group--tight {
  gap: var(--space-1);
}

.badge-group--loose {
  gap: var(--space-3);
}

/* -------------------------------------------------------------------------
 * Attached Badges
 * ---------------------------------------------------------------------- */
.badge-group--attached {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
}

.badge-group--attached .badge {
  border-radius: 0;
}

.badge-group--attached .badge:first-child {
  border-start-start-radius: var(--radius-full);
  border-end-start-radius: var(--radius-full);
}

.badge-group--attached .badge:last-child {
  border-start-end-radius: var(--radius-full);
  border-end-end-radius: var(--radius-full);
}

.badge-group--attached .badge + .badge {
  margin-inline-start: calc(var(--border-width-1) * -1);
}

/* -------------------------------------------------------------------------
 * Interactive Badge
 * ---------------------------------------------------------------------- */
.badge--interactive {
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-in-out),
    border-color var(--duration-fast) var(--easing-in-out),
    color var(--duration-fast) var(--easing-in-out),
    box-shadow var(--duration-fast) var(--easing-in-out),
    transform var(--duration-fast) var(--easing-in-out);
}

.badge--interactive:hover {
  transform: translateY(-1px);
}

.badge--interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.badge--interactive:active {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * Notification Dot
 * ---------------------------------------------------------------------- */
.notification-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-danger-600);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.notification-dot--brand {
  background-color: var(--color-brand-600);
}

.notification-dot--success {
  background-color: var(--color-success-600);
}

.notification-dot--warning {
  background-color: var(--color-warning-500);
}

.notification-dot--danger,
.notification-dot--error {
  background-color: var(--color-danger-600);
}

.notification-dot--info {
  background-color: var(--color-info-600);
}

/* -------------------------------------------------------------------------
 * Responsive Refinements
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .badge--lg {
    --badge-height: 1.875rem;
    --badge-padding-x: var(--space-3);
    --badge-font-size: var(--font-size-xs);
  }

  .status-badge {
    font-size: var(--font-size-xs);
  }
}

/* -------------------------------------------------------------------------
 * Reduced Motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .badge--interactive {
    transition: none !important;
  }

  .badge--interactive:hover,
  .badge--interactive:active {
    transform: none !important;
  }
}