/* Customers tab — "أبلكيشن العميل" strip (Task A). Owned file: admin/admin-qrapp.css (linked from
   admin/index.html). Kept separate from admin.css (owned by another agent) so the two never conflict.
   Owner request (2026-10-22): collapse the old tall card (heading row, then the open-link button on its
   own row, then the create/print row) into one slim strip — icon + title/hint on one side, the two action
   buttons side by side on the other. Single row on desktop, wraps cleanly on mobile. ~1/4 the old height. */

.bs-custapp {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
}
.bs-custapp .ca-info { flex: 1 1 auto; min-width: 150px; display: flex; flex-direction: column; gap: 1px; }
.bs-custapp .ca-info b { font-size: 14px; font-weight: 700; }
.bs-custapp .ca-info small { font-size: 12px; }

.ca-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.ca-row { display: flex; align-items: center; }

/* clearly-visible "فتح تطبيق العميل" button — the only entry point to the live customer app
   left in the admin now that the top-of-dashboard/reservations link card was removed. Primary/solid
   (.btn.pri) to signal it's the main action; the create/print button next to it stays the plain
   outline .btn style for a clear primary/secondary hierarchy. */
.ca-open-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.ca-icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--pri-10, rgba(182, 139, 72, .14)); flex: none;
}

/* creating: short, honest progress animation (~1.5-2.5s) — a scanning sweep across a QR glyph while the
   real link + token are generated server-side, not a decorative spinner shown before anything happened */
.ca-progress { display: inline-flex; align-items: center; gap: 10px; }
.ca-qr-anim {
  position: relative; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex: none;
  background: repeating-conic-gradient(#1c1a17 0deg 90deg, #fff 90deg 180deg) ; background-size: 8px 8px;
  box-shadow: inset 0 0 0 2px #1c1a17;
}
.ca-qr-anim::after {
  content: ''; position: absolute; inset-inline-start: 0; top: -100%; width: 100%; height: 40%;
  background: linear-gradient(180deg, rgba(182,139,72,0) 0%, rgba(182,139,72,.9) 50%, rgba(182,139,72,0) 100%);
  animation: caSweep 1.1s linear infinite;
}
@keyframes caSweep {
  0%   { top: -40%; }
  100% { top: 100%; }
}
.ca-dots::after { content: '…'; animation: caDots 1.2s steps(4, end) infinite; }
@keyframes caDots {
  0%, 20%  { content: ''; }
  40%      { content: '.'; }
  60%      { content: '..'; }
  80%, 100%{ content: '...'; }
}

@keyframes caFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#caBody > * { animation: caFadeIn .25s ease; }

@media (max-width: 640px) {
  .bs-custapp { flex-wrap: wrap; }
  .ca-actions { width: 100%; }
  .ca-actions .btn { flex: 1; justify-content: center; }
}