<!-- Card container: 337×213px, rounded-2xl, shadow -->
<div
  class="relative flex h-[14.8125rem] w-[21.0625rem] flex-col"
  [class.opacity-40]="!card().isActive"
  [attr.data-what]="'customer-card'"
  [attr.data-which]="card().code"
>
  <!-- Black header section: card type + number + barcode -->
  <div
    class="flex flex-col items-center gap-[0.62rem] bg-isa-black px-0 pb-4 pt-[0.5rem]"
  >
    <div>
      <!-- Card type label (grey) -->
      <div class="isa-text-body-2-bold text-center text-isa-neutral-500">
        Kundenkarte Nr.:
      </div>

      <!-- Card number (white, large) - click to copy -->
      <div
        class="isa-text-subtitle-1-bold text-center text-isa-white cursor-pointer"
        (click)="copyCode($event)"
        data-what="card-code"
        [attr.data-which]="card().code"
        uiTooltip
        #copyTooltip="uiTooltip"
        content="Kundenkarte Nr. kopiert!"
        variant="success"
        position="right"
        [triggerOn]="[]"
      >
        {{ card().code }}
      </div>
    </div>

    <!-- Barcode -->
    <shared-barcode
      [value]="card().code"
      [displayValue]="false"
      [height]="barcodeHeight"
      [width]="barcodeWidth"
      [margin]="barcodeMargin"
      [format]="'CODE128'"
      [attr.data-what]="'card-barcode'"
      [attr.data-which]="card().code"
      class="rounded-[0.25rem] overflow-hidden"
    />
  </div>

  <!-- White footer section: customer name -->
  <div
    class="min-h-[3.59rem] bg-isa-white isa-text-body-2-bold text-isa-black flex flex-col items-start justify-center"
  >
    <div class="isa-text-body-2-bold px-3">
      {{ card().firstName }} {{ card().lastName }}
    </div>

    <crm-lock-customer-card
      [isActive]="card().isActive"
      [cardCode]="card().code"
      (cardLocked)="cardLocked.emit()"
    ></crm-lock-customer-card>
  </div>
</div>
