/**
 * kiosk-patch.css — correctifs et extensions CSS kiosk-v4
 * Charger après components.css dans le layout principal.
 */

/* ─── Validation States (forms.html #validation) ─────────────────────── */

.form-control.is-invalid,
.form-input.is-invalid {
  border-color: var(--color-danger);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%23ef4444' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.invalid-feedback {
  font-size: .78rem;
  color: var(--color-danger);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

/* ─── Skeleton pulse (tables.html #loading-table) ─────────────────────── */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.skeleton-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  background: var(--bg-tertiary, #f1f5f9);
  border-radius: var(--radius-md);
}