/* ==========================================================================
   PIN Pad — shared component for PIN entry
   Used in: PWA auth, tablet check-in, backoffice employee edit
   ========================================================================== */

/* Dot display */
.pin-display,
.pwa-pin-display {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  min-height: 14px;
}

.pin-dot,
.pwa-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border-default);
  background: transparent;
  transition: all var(--duration-fast) ease;
}

.pin-dot--filled,
.pwa-pin-dot--filled {
  background: var(--color-brand);
  border-color: var(--color-brand);
  transform: scale(1.1);
}

/* Keypad grid */
.pin-pad,
.pwa-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: var(--space-3);
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

/* In modals, add a background so keys stand out */
.modal .pin-pad {
  background: var(--color-surface-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.modal .pin-pad__key {
  background: var(--color-control-bg);
  border: 1px solid var(--color-border-subtle);
}

.modal .pin-pad__key:active {
  background: var(--color-surface-100);
}

.modal .pin-pad__key--empty {
  background: transparent;
  border-color: transparent;
}

.pin-pad__key,
.pwa-pin-pad__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-200);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.pin-pad__key:active,
.pwa-pin-pad__key:active {
  background: var(--color-border-default);
  transform: scale(0.95);
}

.pin-pad__key--empty,
.pwa-pin-pad__key--empty {
  background: transparent;
  cursor: default;
}

.pin-pad__key--action,
.pwa-pin-pad__key--action {
  font-size: var(--text-xl);
}

.pin-pad__key--action .icon,
.pwa-pin-pad__key--action .icon {
  width: 24px;
  height: 24px;
}

/* Responsive — smaller keys on small screens */
@media (max-width: 374px) {
  .pin-pad__key,
  .pwa-pin-pad__key {
    min-height: 40px;
    font-size: var(--text-lg);
  }
}