/* ============================================
   مَسار — مكونات UI
   ============================================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-sm);
  transition: all var(--t-fast); cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  color: #fff; box-shadow: 0 4px 12px rgba(91, 91, 247, 0.3);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(91, 91, 247, 0.4); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
  background: transparent; color: var(--color-text);
  border: 2px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.btn-danger {
  background: var(--color-danger); color: #fff;
}
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

/* Progress bar (reusable) */
.progress-bar {
  width: 100%; height: 10px; background: var(--color-surface-2);
  border-radius: var(--r-full); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-2));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-fill.success { background: linear-gradient(90deg, #10b981, #34d399); }
.progress-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* Cards (generic) */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: all var(--t-base);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Chip / Tag */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
}
.chip-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.chip-success { background: var(--color-success-soft); color: var(--color-success); }
.chip-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.chip-danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* Divider */
.divider {
  height: 1px; background: var(--color-border);
  margin: var(--sp-5) 0;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Alert */
.alert {
  padding: var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.alert-info { background: var(--color-primary-soft); color: var(--color-primary); border-right: 4px solid var(--color-primary); }
.alert-success { background: var(--color-success-soft); color: var(--color-success); border-right: 4px solid var(--color-success); }
.alert-warning { background: var(--color-warning-soft); color: var(--color-warning); border-right: 4px solid var(--color-warning); }
.alert-danger { background: var(--color-danger-soft); color: var(--color-danger); border-right: 4px solid var(--color-danger); }

/* Tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: var(--color-bg);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
[data-tooltip]:hover::after { opacity: 1; }

/* Tab */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--color-border); margin-bottom: var(--sp-5); overflow-x: auto; }
.tab-btn {
  padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: var(--fs-sm);
  color: var(--color-text-2); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all var(--t-fast); white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Accordion */
.accordion-item { border: 1px solid var(--color-border); border-radius: var(--r-md); margin-bottom: var(--sp-2); overflow: hidden; }
.accordion-header {
  padding: var(--sp-4); font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-surface); transition: background var(--t-fast);
}
.accordion-header:hover { background: var(--color-surface-2); }
.accordion-body { padding: 0 var(--sp-4); max-height: 0; overflow: hidden; transition: all 0.3s ease; }
.accordion-item.open .accordion-body { max-height: 1000px; padding: var(--sp-4); }
.accordion-item.open .accordion-header svg { transform: rotate(180deg); }