<div class="modal-overlay" *ngIf="visible" (click)="closeModal()">
  <div class="modal-container" (click)="$event.stopPropagation()">
    
    <!-- Header -->
    <div class="modal-header">
      <button *ngIf="breadcrumbs.length > 0" class="back-button" (click)="goBack()">
        <i class="fas fa-arrow-left"></i>
      </button>
      <h3 class="modal-title">
        {{ breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].label : 'Ações em Lote' }}
      </h3>
      <button class="close-button" (click)="closeModal()">
        <i class="fas fa-times"></i>
      </button>
    </div>
    
    <!-- Body -->
    <div class="modal-body">
      <div class="selection-info">
        <div class="selection-count">
          <i class="fas fa-check-square"></i>
          <span>{{ selectedItems.length }} item(s) selecionado(s)</span>
        </div>
        <div class="selection-hint" *ngIf="selectedItems.length === 0">
          <i class="fas fa-info-circle"></i>
          <span>Algumas ações estão disponíveis sem seleção</span>
        </div>
      </div>
      
      <div class="actions-list">
        <button 
          *ngFor="let action of availableActions" 
          class="action-card"
          [class.disabled]="isActionDisabled(action)"
          [class.available]="isActionAvailable(action)"
          [class.requires-selection]="action.requiresSelection !== false"
          [class.no-selection-required]="action.requiresSelection === false"
          [disabled]="isActionDisabled(action)"
          (click)="isActionAvailable(action) ? selectAction(action) : null">
          
          <div class="action-icon">
            <i [class]="action.icon"></i>
            <!-- ✨ NOVO: Indicador visual para ações que não requerem seleção -->
            <span class="action-badge" *ngIf="action.requiresSelection === false" title="Não requer seleção">
              <i class="fas fa-unlock"></i>
            </span>
          </div>
          
          <div class="action-content">
            <div class="action-label">{{ action.label }}</div>
            <!-- ✨ NOVO: Descrição do estado da ação -->
            <div class="action-status" *ngIf="isActionDisabled(action) && action.requiresSelection !== false">
              <i class="fas fa-exclamation-triangle"></i>
              <span>Requer seleção de itens</span>
            </div>
            <div class="action-status available" *ngIf="action.requiresSelection === false">
              <i class="fas fa-check-circle"></i>
              <span>Sempre disponível</span>
            </div>
          </div>
          
          <div class="action-indicator" *ngIf="action.subActions && action.subActions.length > 0">
             <i class="fas fa-chevron-right"></i>
          </div>
        </button>
      </div>
    </div>
    
  </div>
</div> 