/* Command progress feedback for customer and admin lifecycle actions. */
.customer-command-actions button:disabled,
.instance-card .actions.qimam-command-locked button:disabled {
  position: relative;
  overflow: hidden;
  opacity: .58;
  cursor: not-allowed;
  pointer-events: none;
}

.customer-command-actions button.qimam-command-active:disabled,
.instance-card .actions button.qimam-command-active:disabled {
  opacity: .92;
  cursor: wait;
}

.customer-command-actions button.qimam-command-active:disabled::before,
.instance-card .actions button.qimam-command-active:disabled::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-end: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: qimam-command-spin .75s linear infinite;
}

.customer-instance-card:has(.customer-command-actions button.qimam-command-active:disabled),
.instance-card:has(.actions button.qimam-command-active:disabled) {
  position: relative;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--primary) 16%, transparent);
}

.customer-instance-card:has(.customer-command-actions button.qimam-command-active:disabled)::before,
.instance-card:has(.actions button.qimam-command-active:disabled)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 15%, color-mix(in srgb, var(--primary) 10%, transparent) 45%, transparent 72%);
  background-size: 220% 100%;
  animation: qimam-command-shimmer 1.4s ease-in-out infinite;
}

.customer-instance-card:has(.customer-command-actions button.qimam-command-active:disabled)::after,
.instance-card:has(.actions button.qimam-command-active:disabled)::after {
  content: "جاري تنفيذ العملية…";
  position: absolute;
  inset-inline-start: 20px;
  bottom: 18px;
  transform: translateY(calc(100% + 12px));
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  box-shadow: var(--shadow);
  animation: qimam-command-pulse 1.15s ease-in-out infinite;
  z-index: 2;
}

[lang="en"] .customer-instance-card:has(.customer-command-actions button.qimam-command-active:disabled)::after,
[lang="en"] .instance-card:has(.actions button.qimam-command-active:disabled)::after {
  content: "Operation in progress…";
}

@keyframes qimam-command-spin {
  to { transform: rotate(360deg); }
}

@keyframes qimam-command-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

@keyframes qimam-command-pulse {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-command-actions button.qimam-command-active:disabled::before,
  .instance-card .actions button.qimam-command-active:disabled::before,
  .customer-instance-card:has(.customer-command-actions button.qimam-command-active:disabled)::before,
  .instance-card:has(.actions button.qimam-command-active:disabled)::before,
  .customer-instance-card:has(.customer-command-actions button.qimam-command-active:disabled)::after,
  .instance-card:has(.actions button.qimam-command-active:disabled)::after {
    animation: none;
  }
}