<!-- Backdrop overlay — click to dismiss -->
<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>

<!-- Modal panel -->
<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">

  <!-- Header -->
  <div class="global-action-modal__header">
    <h2 class="global-action-modal__title">Global Actions</h2>
    <button matIconButton
            class="global-action-modal__close"
            aria-label="Close modal"
            (click)="onClose()">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <!-- Action grid -->
  <div class="global-action-modal__actions">
    @for (action of actions; track action.key) {
      <button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
              (click)="onAction(action)">
        <div class="global-action-modal__action-icon">
          <mat-icon>{{ action.icon }}</mat-icon>
        </div>
        <span class="global-action-modal__action-label">{{ action.label }}</span>
        <span class="global-action-modal__action-desc">{{ action.description }}</span>
      </button>
    }
  </div>
</div>